@import compass
@import compass/reset
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300italic,300,600,600italic,700,700italic,800,800italic)
@import theme_variables
@import bootstrap

@import ../css/font-awesome.css


a:hover
	text-decoration: none

@media only screen and (min-width: 1200px)
	.container
		padding-left: 0
		padding-right: 0

body
	min-width: 320px
	height: 100%
	background: $dark-background
	line-height: 18px
	font-size: 13px
	color: $base-body-color
	&.content_only
		background: none
textarea
	resize: none

//structure
#page
#header
	z-index: 10
.columns-container
	background: $light-background
#columns
	z-index: 1
	position: relative
	padding-bottom: 50px
#left_column
#center_column
#right_column
#footer

//title
#center_column
	.page_product_box
		h3
			@include sub-heading



//text
p.info-title
	font-weight: bold
	color: $base-text-color
	margin-bottom: 25px

p.info-account
	margin: -4px 0 24px 0

.dark
	color: $base-text-color

.main-page-indent
	margin-bottom: $base-page-indent

.alert
	font-weight: bold
	ul, ol
		padding-left: 15px
		margin-left: 27px
		li
			list-style-type: decimal
			font-weight: normal
	&.alert-success 
		text-shadow: 1px 1px rgba(0,0,0,0.1)
		&:before
			font-family: $font-icon
			content: ""
			font-size: 20px
			vertical-align: -2px
			padding-right: 7px
	&.alert-danger
		text-shadow: 1px 1px rgba(0,0,0,0.1)
		&:before
			font-family: $font-icon
			content: ""
			font-size: 20px
			vertical-align: -2px
			padding-right: 7px
			float: left

.label
	white-space: normal
	display: inline-block
	padding: 6px 10px

label
	&.required 
		&:before
			content: "*"
			color: red
			font-size: 14px
			position: relative
			line-height: 12px

.unvisible
	display: none

label
	color: $base-title-color

.checkbox
	line-height: 16px
	label
		color: #777777

.close
	opacity: 1
	&:hover
		opacity: 1

//buttons
input.button_mini,
input.button_small,
input.button,
input.button_large,
input.button_mini_disabled,
input.button_small_disabled,
input.button_disabled,
input.button_large_disabled,
input.exclusive_mini,
input.exclusive_small,
input.exclusive,
input.exclusive_large,
input.exclusive_mini_disabled,
input.exclusive_small_disabled,
input.exclusive_disabled,
input.exclusive_large_disabled,
a.button_mini,
a.button_small,
a.button,
a.button_large,
a.exclusive_mini,
a.exclusive_small,
a.exclusive,
a.exclusive_large,
span.button_mini,
span.button_small,
span.button,
span.button_large,
span.exclusive_mini,
span.exclusive_small,
span.exclusive,
span.exclusive_large,
span.exclusive_large_disabled
	position: relative
	display: inline-block
	padding: 5px 7px
	border: 1px solid #cc9900
	font-weight: bold
	color: #000
	background: url(../img/bg_bt.gif) repeat-x 0 0 #f4b61b
	cursor: pointer
	white-space: normal
	text-align: left

*:first-child+html input.button_mini,
*:first-child+html input.button_small,
*:first-child+html input.button,
*:first-child+html input.button_large,
*:first-child+html input.button_mini_disabled,
*:first-child+html input.button_small_disabled,
*:first-child+html input.button_disabled,
*:first-child+html input.button_large_disabled,
*:first-child+html input.exclusive_mini,
*:first-child+html input.exclusive_small,
*:first-child+html input.exclusive,
*:first-child+html input.exclusive_large,
*:first-child+html input.exclusive_mini_disabled,
*:first-child+html input.exclusive_small_disabled,
*:first-child+html input.exclusive_disabled,
*:first-child+html input.exclusive_large_disabled
	border: none

//hover button
input.button_mini:hover,
input.button_small:hover,
input.button:hover,
input.button_large:hover,
input.exclusive_mini:hover,
input.exclusive_small:hover,
input.exclusive:hover,
input.exclusive_large:hover,
a.button_mini:hover,
a.button_small:hover,
a.button:hover,
a.button_large:hover,
a.exclusive_mini:hover,
a.exclusive_small:hover,
a.exclusive:hover,
a.exclusive_large:hover
	text-decoration: none
	background-position: left -50px

//active button
input.button_mini:active,
input.button_small:active,
input.button:active,
input.button_large:active,
input.exclusive_mini:active,
input.exclusive_small:active,
input.exclusive:active,
input.exclusive_large:active,
a.button_mini:active,
a.button_small:active,
a.button:active,
a.button_large:active,
a.exclusive_mini:active,
a.exclusive_small:active,
a.exclusive:active,
a.exclusive_large:active
	background-position: left -100px

input.button_disabled,
input.exclusive_disabled,
span.exclusive
	border: 1px solid #ccc
	color: #999
	background: url(../img/bg_bt_2.gif) repeat-x 0 0 #CCCCCC
	cursor: default

.btn.disabled,
.btn[disabled]:hover
	opacity: 0.3

.button.button-small
	font: bold 13px/17px $font-famaly
	color: $button-text-color
	background: $button-small-bg
	border: 1px solid
	border-color: #666666 #5f5f5f #292929 #5f5f5f
	padding: 0
	text-shadow: 1px 1px rgba(0,0,0,0.24)
	@include border-radius(0)
	span
		display: block
		padding: 3px 8px 3px 8px
		border: 1px solid
		border-color: #8b8a8a
		i 
			vertical-align: 0px
			margin-right: 5px
			&.right
				margin-right: 0
				margin-left: 5px
		&:hover
			background: $button-small-hover-bg
			border-color: #303030 #303030 #666666 #444444

.button.button-medium
	font-size: 17px
	line-height: 21px
	color: $button-text-color
	padding: 0
	font-weight: bold
	background: rgb(67,183,84)
	background: -moz-linear-gradient(top,  rgba(67,183,84,1) 0%, rgba(65,183,87,1) 2%, rgba(65,184,84,1) 4%, rgba(67,183,86,1) 6%, rgba(65,179,84,1) 38%, rgba(68,179,85,1) 40%, rgba(69,175,85,1) 66%, rgba(65,174,83,1) 74%, rgba(66,172,82,1) 91%, rgba(65,174,85,1) 94%, rgba(67,171,84,1) 96%, rgba(66,172,82,1) 100%)
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(67,183,84,1)), color-stop(2%,rgba(65,183,87,1)), color-stop(4%,rgba(65,184,84,1)), color-stop(6%,rgba(67,183,86,1)), color-stop(38%,rgba(65,179,84,1)), color-stop(40%,rgba(68,179,85,1)), color-stop(66%,rgba(69,175,85,1)), color-stop(74%,rgba(65,174,83,1)), color-stop(91%,rgba(66,172,82,1)), color-stop(94%,rgba(65,174,85,1)), color-stop(96%,rgba(67,171,84,1)), color-stop(100%,rgba(66,172,82,1)))
	background: -webkit-linear-gradient(top,  rgba(67,183,84,1) 0%,rgba(65,183,87,1) 2%,rgba(65,184,84,1) 4%,rgba(67,183,86,1) 6%,rgba(65,179,84,1) 38%,rgba(68,179,85,1) 40%,rgba(69,175,85,1) 66%,rgba(65,174,83,1) 74%,rgba(66,172,82,1) 91%,rgba(65,174,85,1) 94%,rgba(67,171,84,1) 96%,rgba(66,172,82,1) 100%)
	background: -o-linear-gradient(top,  rgba(67,183,84,1) 0%,rgba(65,183,87,1) 2%,rgba(65,184,84,1) 4%,rgba(67,183,86,1) 6%,rgba(65,179,84,1) 38%,rgba(68,179,85,1) 40%,rgba(69,175,85,1) 66%,rgba(65,174,83,1) 74%,rgba(66,172,82,1) 91%,rgba(65,174,85,1) 94%,rgba(67,171,84,1) 96%,rgba(66,172,82,1) 100%)
	background: -ms-linear-gradient(top,  rgba(67,183,84,1) 0%,rgba(65,183,87,1) 2%,rgba(65,184,84,1) 4%,rgba(67,183,86,1) 6%,rgba(65,179,84,1) 38%,rgba(68,179,85,1) 40%,rgba(69,175,85,1) 66%,rgba(65,174,83,1) 74%,rgba(66,172,82,1) 91%,rgba(65,174,85,1) 94%,rgba(67,171,84,1) 96%,rgba(66,172,82,1) 100%)
	background: linear-gradient(to bottom,  rgba(67,183,84,1) 0%,rgba(65,183,87,1) 2%,rgba(65,184,84,1) 4%,rgba(67,183,86,1) 6%,rgba(65,179,84,1) 38%,rgba(68,179,85,1) 40%,rgba(69,175,85,1) 66%,rgba(65,174,83,1) 74%,rgba(66,172,82,1) 91%,rgba(65,174,85,1) 94%,rgba(67,171,84,1) 96%,rgba(66,172,82,1) 100%)
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#43b754', endColorstr='#42ac52',GradientType=0 )
	border: 1px solid
	border-color: #399a49 #247f32 #1a6d27 #399a49
	@include border-radius(0)
	span
		display: block
		padding: 10px 10px 10px 14px
		border: 1px solid
		border-color: #74d578
		// max 480px
		@media (max-width: $screen-xs)
			font-size: 15px
			padding-right: 7px
			padding-left: 7px
		i
			&.left
				font-size: 24px
				vertical-align: -2px
				margin: -4px 10px 0 0
				display: inline-block
				// max 480px
				@media (max-width: $screen-xs)
					margin-right: 5px
			&.right
				margin-right: 0
				margin-left: 9px
				// max 480px
				@media (max-width: $screen-xs)
					margin-left: 5px
	&:hover
		background: rgb(58,160,76)
		background: -moz-linear-gradient(top,  rgba(58,160,76,1) 0%, rgba(58,160,74,1) 100%)
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(58,160,76,1)), color-stop(100%,rgba(58,160,74,1)))
		background: -webkit-linear-gradient(top,  rgba(58,160,76,1) 0%,rgba(58,160,74,1) 100%)
		background: -o-linear-gradient(top,  rgba(58,160,76,1) 0%,rgba(58,160,74,1) 100%)
		background: -ms-linear-gradient(top,  rgba(58,160,76,1) 0%,rgba(58,160,74,1) 100%)
		background: linear-gradient(to bottom,  rgba(58,160,76,1) 0%,rgba(58,160,74,1) 100%)
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3aa04c', endColorstr='#3aa04a',GradientType=0 )
		border-color: #196f28 #399a49 #399a49 #258033

.button.button-medium.exclusive
	border-color: #db8600 #d98305 #c86d26 #d98305
	background: rgb(253,170,2)
	background: -moz-linear-gradient(top, rgba(253,170,2,1) 0%, rgba(254,151,2,1) 100%)
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,170,2,1)), color-stop(100%,rgba(254,151,2,1)))
	background: -webkit-linear-gradient(top, rgba(253,170,2,1) 0%,rgba(254,151,2,1) 100%)
	background: -o-linear-gradient(top, rgba(253,170,2,1) 0%,rgba(254,151,2,1) 100%)
	background: -ms-linear-gradient(top, rgba(253,170,2,1) 0%,rgba(254,151,2,1) 100%)
	background: linear-gradient(to bottom, rgba(253,170,2,1) 0%,rgba(254,151,2,1) 100%)
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdaa02', endColorstr='#fe9702',GradientType=0 )
	span
		border-color: #fec133 #febc33 #feb233 #febc33
		&:hover
			filter: none
			background: #f89609
			border-color: #a6550c #ba6708 #db8600 #ba6708
			span
				border-color: #fec133

.link-button
	font-weight: bold
	i
		margin-right: 5px
		&.large
			font-size: 26px
			line-height: 26px
			vertical-align: -3px
			color: #c0c0c0

.btn.button-plus,
.btn.button-minus
	font-size: 14px
	line-height: 14px
	color: $button-pm-color
	text-shadow: 1px -1px rgba(0,0,0,0.05)
	padding: 0
	border: 1px solid
	border-color: #dedcdc #c1bfbf #b5b4b4 #dad8d8
	@include border-radius(0)
	span
		display: block
		border: 1px solid $light-border-color
		vertical-align: middle
		width: 25px
		height: 25px
		text-align: center
		vertical-align: middle
		padding: 4px 0 0 0
		background: rgb(30,87,153)
		background: rgb(255,255,255)
		background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(251,251,251,1) 100%)
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(251,251,251,1)))
		background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(251,251,251,1) 100%)
		background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(251,251,251,1) 100%)
		background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(251,251,251,1) 100%)
		background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(251,251,251,1) 100%)
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fbfbfb',GradientType=0)
	&:hover
		color: $base-text-color
		span
			filter: none
			background: #f6f6f6

.button.exclusive-medium
	font-size: 17px
	padding: 0
	line-height: 21px
	color: $button-em-color
	font-weight: bold
	border: 1px solid
	border-color: #cacaca #b7b7b7 #9a9a9a #b7b7b7
	text-shadow: 1px 1px rgba(255,255,255,1)
	span 
		border: 1px solid
		border-color: $light-border-color
		display: block
		padding: 9px 10px 11px 10px
		background: rgb(247,247,247)
		background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(237,237,237,1) 100%)
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(237,237,237,1)))
		background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
		background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
		background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
		background: linear-gradient(to bottom, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ededed',GradientType=0)
		// max 480px
		@media (max-width: $screen-xs)
			font-size: 15px
			padding-right: 7px
			padding-left: 7px
		&:hover
			border-color: #9e9e9e #c2c2c2 #c8c8c8 #c2c2c2
			span 
				background: rgb(231,231,231)
				background: -moz-linear-gradient(top,  rgba(231,231,231,1) 0%, rgba(231,231,231,1) 0%)
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(231,231,231,1)), color-stop(0%,rgba(231,231,231,1)))
				background: -webkit-linear-gradient(top,  rgba(231,231,231,1) 0%,rgba(231,231,231,1) 0%)
				background: -o-linear-gradient(top,  rgba(231,231,231,1) 0%,rgba(231,231,231,1) 0%)
				background: -ms-linear-gradient(top,  rgba(231,231,231,1) 0%,rgba(231,231,231,1) 0%)
				background: linear-gradient(to bottom,  rgba(231,231,231,1) 0%,rgba(231,231,231,1) 0%)
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#e7e7e7',GradientType=0)

.button.ajax_add_to_cart_button
	font: 700 17px/21px $font-famaly
	color: $button-text-color
	text-shadow: 1px 1px rgba(0,0,0,0.2)
	padding: 0
	border: 1px solid
	border-color: #0079b6 #006fa8 #012740 #006fa8
	span
		border: 1px solid
		border-color: #06b2e6
		padding: 10px 14px
		display: block
		background: rgb(0,154,208)
		background: -moz-linear-gradient(top, rgba(0,154,208,1) 0%, rgba(0,122,183,1) 100%)
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,154,208,1)), color-stop(100%,rgba(0,122,183,1)))
		background: -webkit-linear-gradient(top, rgba(0,154,208,1) 0%,rgba(0,122,183,1) 100%)
		background: -o-linear-gradient(top, rgba(0,154,208,1) 0%,rgba(0,122,183,1) 100%)
		background: -ms-linear-gradient(top, rgba(0,154,208,1) 0%,rgba(0,122,183,1) 100%)
		background: linear-gradient(to bottom, rgba(0,154,208,1) 0%,rgba(0,122,183,1) 100%)
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009ad0', endColorstr='#007ab7',GradientType=0)
	&:hover
		border-color: #01314e #004b74 #0079b6 #004b74
		span
			filter: none
			background: #0084bf

.button.lnk_view
	font: 700 17px/21px $font-famaly
	color: $base-text-color
	text-shadow: 1px 1px rgba(255,255,255,1)
	padding: 0
	border: 1px solid
	border-color: #cacaca #b7b7b7 #9a9a9a #b7b7b7
	span
		border: 1px solid
		border-color: $light-border-color
		padding: 10px 14px
		display: block
		background: rgb(247,247,247)
		background: -moz-linear-gradient(top,  rgba(247,247,247,1) 0%, rgba(237,237,237,1) 100%)
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(237,237,237,1)))
		background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
		background: -o-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
		background: -ms-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
		background: linear-gradient(to bottom,  rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ededed',GradientType=0)
	&:hover
		border-color: #9e9e9e #9e9e9e #c8c8c8 #9e9e9e
		span
			filter: none
			background: #e7e7e7
	i.left
		padding-right: 8px
		color: #777777

//form
.form-control
	padding: 3px 5px
	height: 27px
	@include box-shadow(none)
	&.grey
		background: $base-box-bg

//table
table.std,
table.table_block
	margin-bottom: 20px
	width: 100%
	border: 1px solid #999
	border-bottom: none
	background: white
	border-collapse: inherit

table.std th,
table.table_block th
	padding: 14px 12px
	font-size: 12px
	color: $light-text-color
	font-weight: bold
	text-transform: uppercase
	text-shadow: 0 1px 0 #000
	background: #999

table.std tr.alternate_item,
table.table_block tr.alternate_item
	background-color: #f3f3f3

table.std  td,
table.table_block  td
	padding: 12px
	border-right: 1px solid #e9e9e9
	border-bottom: 1px solid #e9e9e9
	font-size: 12px
	vertical-align: top

.table
	margin-bottom: 30px
	> thead
		> tr
			> th
				background: $table-background
				border-bottom-width: 1px
				color: $base-text-color
	td
		a.color-myaccount
			color: $link-color
			text-decoration: underline
			&:hover
				text-decoration: none
	tfoot
		tr
			background: $table-background

//product elements
.product-name
	font-size: 17px
	line-height: 23px
	color: $product-name-color
	margin-bottom: 0
	a
		font-size: 17px
		line-height: 23px
		color: $product-name-color
		&:hover
			color: $product-name-hover-color

.price
	font-size: 13px
	color: $price-color

.price.product-price
	font: 600 21px/26px $font-custom
	color: $product-price-color

.old-price
	color: $product-old-price-color
	text-decoration: line-through

.old-price.product-price
	font-size: 17px

.special-price
	color: $product-special-price-color

.price-percent-reduction
	background: #f13340
	border: 1px solid #d02a2c
	font: 600 21px/24px $font-custom
	color: $light-text-color
	padding: 0 5px 0 3px
	display: inline-block
	&.small
		font: 700 14px/17px $font-famaly
		padding: 1px 6px


//Labels New/Sale
.new-box,
.sale-box
	position: absolute
	top: -4px
	overflow: hidden
	height: 74px
	width: 74px
	text-align: center
	z-index: 0

.new-box
	left: -4px

.sale-box
	right: -5px

.new-label
	font: 700 15px/18px $font-famaly
	color: $light-text-color
	background: #6ad4ff
	text-transform: uppercase
	padding: 9px 0 7px
	text-shadow: 1px 1px rgba(0,0,0,0.24)
	width: 113px
	text-align: center
	display: block
	position: absolute
	left: -33px
	top: 6px
	z-index: 1
	@include rotate(-45deg)
	&:before
		position: absolute
		bottom: -3px
		right: 5px
		width: 0px
		height: 0px
		border-style: solid
		border-width: 4px 4px 0px 4px
		border-color: #21a3d8 transparent transparent transparent
		content: "."
		text-indent: -5000px
		@include rotate(225deg)
	&:after
		position: absolute
		bottom: -3px
		left: 4px
		width: 0px
		height: 0px
		border-style: solid
		border-width: 4px 4px 0px 4px
		border-color: #21a3d8 transparent transparent transparent
		content: "."
		text-indent: -5000px
		@include rotate(145deg)

.sale-label
	font: 700 15px/18px $font-famaly
	color: $light-text-color
	background: #f13340
	text-transform: uppercase
	padding: 9px 0 7px
	text-shadow: 1px 1px rgba(0,0,0,0.24)
	width: 113px
	text-align: center
	display: block
	position: absolute
	right: -33px
	top: 6px
	z-index: 1
	@include rotate(45deg)
	&:before
		position: absolute
		bottom: -3px
		right: 4px
		width: 0px
		height: 0px
		border-style: solid
		border-width: 4px 4px 0px 4px
		border-color: #ad2b34 transparent transparent transparent
		content: "."
		text-indent: -5000px
		@include rotate(225deg)
	&:after
		position: absolute
		bottom: -3px
		left: 5px
		width: 0px
		height: 0px
		border-style: solid
		border-width: 4px 4px 0px 4px
		border-color: #ad2b34 transparent transparent transparent
		content: "."
		text-indent: -5000px
		@include rotate(136deg)

.ie8
	.new-label
		left: 0px
		top: 0px
		width: auto
		padding: 5px 15px
		&:after
			display: none
		&:before
			display: none
	.sale-label
		right: 0px
		top: 0px
		width: auto
		padding: 5px 15px
		&:after
			display: none
		&:before
			display: none
	.new-box
		top: -1px
		left: -1px
	.sale-box
		right: -1px
		top: -1px 

//BOXES
.box
	background: $base-box-bg
	border: 1px solid $base-border-color
	padding: $base-box-padding
	margin: $base-box-indent
	line-height: 23px
	p
		margin-bottom: 0
	&.box-small
		padding: 9px 10px 9px 20px
		.dark
			padding-top: 10px
			padding-right: 20px
			margin-bottom: 0
			width: auto

.page-product-box
	padding-bottom: 10px

.product-box
	width: 178px
	float: left
	@include box-sizing(border-box)
	.product-image
		border: $main_border
		background: white
		padding: 5px
		display: block
		margin-bottom: 11px
		img
			max-width: 100%
			width: 100%
			height: auto

//Homepage Tabs
#home-page-tabs
	border: none
	background: $light-background
	// min 768px
	@media (min-width: $screen-sm)
		padding: 10px 0
		margin: 0 0 0 -18px
	> li
		margin-bottom: 0
		// min 768px
		@media (min-width: $screen-sm)
			border-left: 1px solid $base-border-color
			margin: 0 0px 0 9px
			padding: 0 0px 0 9px
		// max 479px
		@media (max-width: $screen-xs - 1)
			width: 100%
		a
			font: 600 21px/24px $font-custom
			color: $base-heading-color
			text-transform: uppercase
			border: none
			outline: none
			margin: 0
			padding: 10px
			// min 768px
			@media (min-width: $screen-sm)
				padding: 1px 10px
		&:first-child
			border: none
	> li.active a,
	>li a:hover
		background: $dark-background
		color: $light-text-color
		padding: 10px
		// min 768px
		@media (min-width: $screen-sm)
			margin: -9px 0


#index
	.tab-content
		margin-top: 35px
		margin-bottom: 34px

.block
	margin-bottom: 30px
	// max 767px
	@media (max-width: $screen-xs-max)
		margin-bottom: 0px
	.block_content
		// max 767px
		@media (max-width: $screen-xs-max)
			margin-bottom: 20px


.block 
	.title_block,
	h4
		font: 600 18px/22px $font-custom
		color: $base-heading-color
		background: #f6f6f6
		border-top: 5px solid $dark-border-color
		text-transform: uppercase
		padding: 14px 5px 17px 20px
		margin-bottom: 20px
		@media (min-width: $screen-sm) and (max-width: $screen-sm-max)
			font-size: 14px
		// max 767px
		@media (max-width: $screen-xs-max)
			position: relative
			&:after
				display: block
				font-family: $font-icon
				content: ""
				position: absolute
				right: 0
				top: 15px
				height: 36px
				width: 36px
				font-size: 26px
				font-weight: normal
			&.active:after
				content: ""
		a
			color: $base-heading-color
			&:hover
				color: $base-text-color

	&#contact_block
		background: $dark-background
		
		.title_block
			border-color: #e4e3e3
			background: $dark-background
			color: $light-text-color
			margin-bottom: 0
			padding-bottom: 9px
	.list-block
		margin-top: -8px
		// max 767px
		@media (max-width: $screen-xs-max)
			margin-top: 0
		li
			padding: 5px 0 6px 20px
			border-top: 1px solid $base-border-color
			a
				i
					display: none
				&:before
					content: ""
					display: inline
					font-family: $font-icon
					color: $base-text-color
					padding-right: 8px
				&:hover
					color: $base-text-color
					font-weight: bold
			&:first-child
				border-top: none
		.form-group
			padding-top: 20px
			border-top: 1px solid $base-border-color
			margin-bottom: 0
			select
				max-width: 270px
				// max 767px
				@media (max-width: $screen-xs-max)
					width: 270px
		.btn
			margin-top: 12px
	.products-block
		li
			padding: 0 0 20px 0
			margin-bottom: 20px
			border-bottom: 1px solid $base-border-color
			.products-block-image
				float: left
				border: 1px solid $base-border-color
				margin-right: 19px
				// min 768px max 991px
				@media (min-width: $screen-sm) and (max-width: $screen-sm-max)
					float: none
					display: inline-block
					margin: 0 auto 10px
					text-align: center
			.product-content
				overflow: hidden
				h5
					margin: -3px 0 0 0
		.product-name
			font-size: 15px
			line-height: 18px
		.product-description
			margin-bottom: 14px
		.price-percent-reduction
			font: 700 14px/17px $font-famaly
			padding: 1px 6px

//Block CATEGORIES
#categories_block_top
	clear: both
	position: relative
	top: 30px
	.sf-menu
		position: relative
		> li
			position: static
			> ul
				width: 100%
				top: 60px
				margin: 0 20px
				> li
					display: block
					float: left
					width: 20%
					-webkit-box-sizing: border-box
					-moz-box-sizing: border-box
					box-sizing: border-box
					padding: 0 10px
				> .category_thumb
					display: block
					clear: both
					overflow: hidden
					width: 100%
					img
						display: inline-block
						width: 33%
			h4
				a
					font-size: 1.1em
					&:before
						display: none
			.main-level-submenus
				position: relative
				display: block !important
				visibility: visible !important
				top: 0
				background: none
				box-shadow: none
				padding: 0
				left: 0
		.category_thumb
			display: none

#categories_block_left
	.block_content > ul
		border-top: 1px solid $base-border-color
	li
		position: relative
		a
			font-weight: bold
			color: $base-text-color
			display: block
			font-size: 13px
			line-height: 30px
			padding: 0 30px 0 19px
			border-bottom: 1px solid $base-border-color
		span.grower
			display: block
			background: #f6f6f6
			position: absolute
			right: 0
			top: 0
			cursor: pointer
			font-family: $font-icon
			font-size: 14px
			&.OPEN,
			&.CLOSE
				&:before
					content: ""
					display: block
					vertical-align: middle
					width: 30px
					height: 30px
					color: $base-text-color
					line-height: 30px
					text-align: center
			&.CLOSE:before
				content: ""
				color: #c0c0c0
		& span.grower:hover + a,
		a:hover,
		a.selected 
			background: #f6f6f6
		li
			a
				font-weight: normal
				color: #777777
				&:before
					content: ""
					font-family: $font-icon
					line-height: 29px
					padding-right: 8px


.page-heading
	font: 600 18px/22px $font-custom
	color: $base-heading-color
	text-transform: uppercase
	padding: 0px 0px 17px 0px
	margin-bottom: 30px
	border-bottom: 1px solid $base-border-color
	overflow: hidden
	
	span.heading-counter
		font: bold 13px/22px $font-famaly
		float: right
		color: $base-text-color
		text-transform: none
		@media (max-width: $screen-xs)
			float: none
			display: block
			padding-top: 5px
	span.lighter
		color: #9c9c9c
	&.bottom-indent
		margin-bottom: 16px
	&.product-listing
		border-bottom: none
		margin-bottom: 0

.page-subheading
	font-family: $font-custom
	font-weight: 600
	text-transform: uppercase
	color: $base-heading-color
	font-size: 18px
	padding: 0 0 15px
	line-height: normal
	margin-bottom: 12px
	border-bottom: 1px solid $base-border-color

h3.page-product-heading
	@include sub-heading

// BLOCK .footer_links (cms pages)
ul.footer_links
	padding: 20px 0 0px 0
	border-top: 1px solid $base-border-color
	height: 65px
	li
		float: left
		&+li
			margin-left: 10px

// barre comparaison / tri
.content_sortPagiBar
	.sortPagiBar
		border-top: 1px solid $base-border-color
		border-bottom: 1px solid $base-border-color
		padding: 19px 0 10px 0
		#productsSortForm
			float: left
			margin-right: 20px
			margin-bottom: 10px
			select
				max-width: 192px
				float: left
				@media (max-width: $screen-sm-max)
					max-width: 160px
			.selector
				float: left 
		.nbrItemPage
			float: left
			select
				max-width: 59px
				float: left
			.clearfix > span
				padding: 3px 0 0 12px
				display: inline-block
				float: left
			#uniform-nb_item
			float: left
		label,
		select
			float: left
		label
			padding: 3px 6px 0 0
		&.instant_search
			#productsSortForm
			display: none
	.display,
	.display_m
		float: right
		margin-top: -4px
		li
			float: left
			padding-left: 12px
			text-align: center
			a
				color: $GL-text-color
				font-size: 11px
				line-height: 14px
				i
					display: block
					font-size: 24px
					height: 24px
					line-height: 24px
					margin-bottom: -3px
					color: $GL-icon-color	
			a:hover,
			&.selected
				i
					color: $GL-icon-color-hover
			&.selected
				a 
					cursor: default
			&.display-title
				font-weight: bold
				color: $base-text-color
				padding: 7px 6px 0 0

//pagination
.top-pagination-content,
.bottom-pagination-content
	text-align: center
	padding: 12px 0 12px 0
	position: relative
	div.pagination
		margin: 0
		float: right
		width: 530px
		text-align: center
		// min 992px max 1199px
		@media (min-width: $screen-md) and (max-width: $screen-md-max)
			width: 380px
		// max 991px
		@media (max-width: $screen-sm-max)
			float: left
			width: auto
		.showall
			float: right
			margin: 8px 53px 8px 14px
			// min 992px max 1199px
			@media (min-width: $screen-md) and (max-width: $screen-md-max)
				margin-right: 11px
			// max 991px
			@media (max-width: $screen-sm-max)
				margin-right: 0
			.btn
				span
					font-size: 13px
					padding: 3px 5px 4px 5px	
					line-height: normal
	ul.pagination
		margin: 8px 0px 8px 0
		// max 991px
		@media (max-width: $screen-sm-max)
			float: left
		li
			display: inline-block
			float: left
			> a,
			> span
				margin: 0 1px 0 0px
				padding: 0
				font-weight: bold
				border: 1px solid
				border-color: #dfdede #d2d0d0 #b0afaf #d2d0d0
				display: block
				span
					border: 1px solid $light-border-color
					padding: 2px 8px
					display: block
					background: url(../img/pagination-li.gif) 0 0 repeat-x $pagination-bgcolor
			> a:hover
				span
					background: $pagination-hover-bg
			&.pagination_previous,
			&.pagination_next
				color: $pagination-prevnext-color
				font-weight: bold
				> a,
				> span
					border: none
					background: none
					display: block
					padding: 4px 0
					// max 767px
					@media (max-width: $screen-xs-max)
						b
							display: none
					span
						border: none
						padding: 0
						background: none
						b 
							font-weight: bold
			&.pagination_previous
				margin-right: 10px
			&.pagination_next
				margin-left: 10px
			&.active
				> span
					color: $base-text-color
					border-color: #dfdede #d2d0d0 #b0afaf #d2d0d0
					span
						background: $pagination-hover-bg
	
	.compare-form
		float: right
		// max 479px
		@media (max-width: $screen-xs - 1)
			float: left
			width: 100%
			text-align: left
			padding-bottom: 10px
			clear: both
	.product-count
		padding: 11px 0 0 0
		float: left
		// max 991px
		@media (max-width: $screen-sm-max)
			clear: left

.bottom-pagination-content
	border-top: 1px solid $base-border-color

//CART steps
ul.step
	margin-bottom: 30px
	overflow: hidden
	//min 480px
	@media (min-width: $screen-xs)
		@include border-radius(4px)
	li
		float: left
		width: 20%
		text-align: left
		border: 1px solid
		border-top-color: #cacaca
		border-bottom-color: #9a9a9a
		border-right-color: #b7b7b7
		border-left-width: 0px
		// max 480px
		@media (max-width: $screen-xs - 1)
			width: 100%
			border-left-width: 1px
		a,
		span,
		&.step_current span,
		&.step_current_end span
			display: block
			padding: 13px 10px 14px 13px
			color: $base-text-color
			font-size: 17px
			line-height: 21px
			font-weight: bold
			text-shadow: 1px 1px rgba(255,255,255,1)
			position: relative
			// min 991px										
			@media (min-width: $screen-md) 
				&:after
					content: "."
					position: absolute
					top: 0
					right: -31px
					z-index: 0
					text-indent: -5000px
					display: block
					width: 31px
					height: 52px
					margin-top: -2px
			&:focus
			text-decoration: none
			outline: none
		&.first
			border-left-width: 1px
			border-left-color: #b7b7b7
			//min 480px
			@media (min-width: $screen-xs)
				@include border-top-left-radius(4px)
				@include border-bottom-left-radius(4px)
			span,
			a
				z-index: 5
				padding-left: 13px !important
				//min 480px
				@media (min-width: $screen-xs)
					@include border-top-left-radius(4px)
					@include border-bottom-left-radius(4px)
		&.second
			span, a
				z-index: 4
		&.third
			span, a
				z-index: 3
		&.four
			span, a
				z-index: 2
		&.last
			span
				z-index: 1
			//min 480px
			@media (min-width: $screen-xs)
				@include border-top-right-radius(4px)
				@include border-bottom-right-radius(4px)
				span
					@include border-top-right-radius(4px)
					@include border-bottom-right-radius(4px)																
		&.step_current
			font-weight: bold
			background: rgb(66,184,86)
			background: -moz-linear-gradient(top, rgba(66,184,86,1) 0%, rgba(67,171,84,1) 100%)
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(66,184,86,1)), color-stop(100%,rgba(67,171,84,1)))
			background: -webkit-linear-gradient(top, rgba(66,184,86,1) 0%,rgba(67,171,84,1) 100%)
			background: -o-linear-gradient(top, rgba(66,184,86,1) 0%,rgba(67,171,84,1) 100%)
			background: -ms-linear-gradient(top, rgba(66,184,86,1) 0%,rgba(67,171,84,1) 100%)
			background: linear-gradient(to bottom, rgba(66,184,86,1) 0%,rgba(67,171,84,1) 100%)
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42b856', endColorstr='#43ab54',GradientType=0)
			border-color: #399b49 #51ae5c #208931 #369946
			span
				color: $light-text-color
				text-shadow: 1px 1px rgba(32,137,49,1)
				border: 1px solid
				border-color: #73ca77 #74c776 #74c175 #74c776
				position: relative
				//min 991px
				@media (min-width: $screen-md)
					padding-left: 38px					
					&:after
						background: url(../img/order-step-a.png) right 0 no-repeat

		&.step_current_end
			font-weight: bold

		&.step_todo
			background: rgb(247,247,247)
			background: -moz-linear-gradient(top,  rgba(247,247,247,1) 0%, rgba(237,237,237,1) 100%)
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(237,237,237,1)))
			background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
			background: -o-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
			background: -ms-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
			background: linear-gradient(to bottom,  rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ededed',GradientType=0)
			span
				display: block
				border: 1px solid
				border-color: $light-border-color
				color: $base-text-color
				position: relative
				// min 991px
				@media (min-width: $screen-md)
					padding-left: 38px
					&:after
						background: url(../img/order-step-current.png) right 0 no-repeat
		&.step_done
			border-color: #666666 #5f5f5f #292929 #5f5f5f
			background: rgb(114,113,113)
			background: -moz-linear-gradient(top,  rgba(114,113,113,1) 0%, rgba(102,102,102,1) 100%)
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(114,113,113,1)), color-stop(100%,rgba(102,102,102,1)))
			background: -webkit-linear-gradient(top,  rgba(114,113,113,1) 0%,rgba(102,102,102,1) 100%)
			background: -o-linear-gradient(top,  rgba(114,113,113,1) 0%,rgba(102,102,102,1) 100%)
			background: -ms-linear-gradient(top,  rgba(114,113,113,1) 0%,rgba(102,102,102,1) 100%)
			background: linear-gradient(to bottom,  rgba(114,113,113,1) 0%,rgba(102,102,102,1) 100%)
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#727171', endColorstr='#666666',GradientType=0)
			a
				color: $light-text-color
				text-shadow: 1px 1px rgba(0,0,0,0.3)
				border: 1px solid
				border-color: #8b8a8a
				// min 991px
				@media (min-width: $screen-md)
					padding-left: 38px
					&:after
						background: url(../img/order-step-done.png) right 0 no-repeat
		&.step_done.step_done_last
		// min 991px
			@media (min-width: $screen-md)
				a:after
					background: url(../img/order-step-done-last.png) right 0 no-repeat
		&#step_end
			span
			// min 991px
			@media (min-width: $screen-md)	
				&:after
					display: none
		
		em
			font-style: normal
			// min 480px max 767px
			@media (min-width: $screen-xs) and (max-width: $screen-xs-max)
				display: none


// module productcomments
.rating
	clear: both
	display: block
	margin: 2em
	cursor: pointer

.rating:after
	content: '.'
	display: block
	height: 0
	width: 0
	clear: both
	visibility: hidden

.cancel, .star
	overflow: hidden
	float: left
	margin: 0 1px 0 0
	width: 16px
	height: 16px
	cursor: pointer

.cancel, .cancel a 
	background: url(../../../modules/productcomments/img/delete.gif) no-repeat 0 -16px !important

.star, .star a

.cancel a, .star a
	display: block
	width: 100%
	height: 100%
	background-position: 0 0

div.star_on a
	background-position: 0 -16px

div.star_hover a,
div.star a:hover
	background-position: 0 -32px

.pack_content
	margin: 10px 0 10px 0

.confirmation
	margin: 0 0 10px
	padding: 10px
	border: 1px solid #e6db55
	font-size: 13px
	background: none repeat scroll 0 0 #ffffe0

#page .rte
	background: transparent none repeat scroll 0 0

.listcomment
	list-style-type: none
	margin: 0 0 20px 0 !important

.listcomment li
	padding: 10px 0
	border-bottom: 1px dotted $base-border-color
	color: #666

.listcomment .titlecomment
	display: block
	font-weight: bold
	font-size: 12px
	color: $base-text-color

.listcomment .txtcomment
	display: block
	padding: 5px 0
	color: $base-text-color

.listcomment .authorcomment

//HEADER
.banner-top
	background: #000

.header-container
	background: $light-background

#header
	padding-bottom: 21px
	position: relative
	background: $light-background
	.header-row
		background: $dark-background
		.shop-phone
			display: block
			padding: 5px 0 10px
			// max 767px
			@media (max-width: $screen-xs-max)
				display: none
			i
				font-size: 21px
				line-height: 21px
				color: $light-text-color
				padding-right: 7px
			strong
				color: $light-text-color
		
		#header_user_info
			float: right
			border-left: 1px solid #515151
			border-right: 1px solid #515151
			// max 479px
			@media (max-width: $screen-xs - 1) 
				width: 25%
				text-align: center												
			a
				color: $light-text-color
				font-weight: bold
				display: block
				padding: 8px 9px 11px 8px
				// max 479px
				@media (max-width: $screen-xs - 1)
					font-size: 11px

	.header-row-2
		position: relative
		z-index: 1
	#header_logo
		position: absolute
		left: 0
		top: 27px
		z-index: 1
		// min 768px max 991px
		@media (min-width: $screen-sm) and (max-width: $screen-sm-max)
			width: 250px
			top: 35px
		// min 480px max 767px
		@media (min-width: $screen-xs) and (max-width: $screen-xs-max)
			width: 174px
			left: 15px
			top: 48px
		// max 479px
		@media (max-width: $screen-xs - 1)
			width: 200px
			left: 50%
			margin-left: -100px
			top: 20px
	#header_right
		position: relative

	//languages/currencies 
	#currencies-block-top,
	#languages-block-top 
		float: right
		border-left: 1px solid #515151
		position: relative
		// max 479px
		@media (max-width: $screen-xs - 1)
			width: 25%
																		
		span.firstWord
			display: none
		
		div.current
			font-weight: bold
			padding: 8px 10px 10px 10px
			color: $light-text-color
			text-shadow: 1px 1px rgba(0,0,0,0.2)
			// max 479px
			@media (max-width: $screen-xs - 1)
				text-align: center
				padding: 9px 5px 10px
				font-size: 11px
			strong
				color: #777777
			&:after
				content: ""
				font-family: $font-icon
				font-size: 18px
				line-height: 18px
				color: #686666
				vertical-align: -2px
				padding-left: 12px
				// max 479px
				@media (max-width: $screen-xs - 1)
					padding-left: 2px
					font-size: 13px
					line-height: 13px
					vertical-align: 0
			.cur-label
				// max 479px
				@media (max-width: $screen-xs - 1)
					display: none
		ul
			display: none
			position: absolute
			top: 37px
			left: 0
			width: 157px
			background: $dark-background
			z-index: 2
			li 
				color: $light-text-color
				line-height: 35px
				font-size: 13px
				a,
				> span 
					padding: 0 10px 0 12px
					display: block
					color: $light-text-color
				&.selected, &:hover a 
					background: #484848
				
			
		
	
	#contact-link
		float: right
		border-left: 1px solid #515151
		// max 479px
		@media (max-width: $screen-xs - 1)
			width: 25%
			text-align: center														
		a
			display: block
			color: $light-text-color
			font-weight: bold
			padding: 8px 10px 11px 10px
			text-shadow: 1px 1px rgba(0,0,0,0.2)
			// max 479px
			@media (max-width: $screen-xs - 1)
				font-size: 11px
				padding-left: 5px
				padding-right: 5px
	#contact-link a,
	.header-row #header_user_info a,
	#currencies-block-top div.current,
	#languages-block-top div.current
		cursor: pointer
		&:hover, &.active
			background: #2b2b2b

.ie8 #header #header_logo
	width: 350px


// BREADCRUMB
.breadcrumb
	display: inline-block
	padding: 0 11px 0 0
	border: 1px solid $base-border-color
	font-weight: bold
	font-size: 12px
	line-height: 24px
	min-height: 6px
	@include border-radius(3px)
	overflow: hidden
	margin-bottom: 16px
	position: relative
	z-index: 1
	.navigation-pipe 
		width: 18px
		display: inline-block
		text-indent: -5000px
	a
		display: inline-block
		background: $light-background
		padding: 0 8px 0 22px
		margin-left: -26px
		position: relative
		z-index: 2
		color: $base-text-color
		&.home
			font-size: 17px
			color: $text-color
			width: 38px
			text-align: center
			padding: 0
			margin: 0
			@include border-top-left-radius(3px)
			@include border-bottom-left-radius(3px)
			z-index: 99
			line-height: 22px
			display: inline-block
			height: 24px
			i
				vertical-align: -1px
		&:after
			display: inline-block
			content: "."
			position: absolute
			right: -10px
			top: 3px
			width: 18px
			height: 18px
			background: $light-background
			border-right: 1px solid $base-border-color
			border-top: 1px solid $base-border-color
			border-radius: 2px
			text-indent: -5000px
			z-index: -1
			@include rotate(45deg)
		&:hover
			color: #777
.ie8
	.breadcrumb
		min-height: 1px
		a:after
			display: none
		.navigation-pipe
			width: 20px

// FOOTER
.footer-container
	padding: 0 0 100px 0
	// min 768px
	@media (min-width: $screen-sm)
		background: url(../img/footer-bg.gif) repeat-x
	#footer
		color: #777
		position: relative
		.footer-block
			margin-top: 45px
			// max 767px
			@media (max-width: $screen-xs-max)
				margin-top: 20px
		a
			color: #777
			&:hover
				color: $light-text-color
		h4
			font: 600 18px/22px $font-custom
			color: $light-text-color
			margin: 0 0 13px 0
			// max 767px
			@media (max-width: $screen-xs-max)
				position: relative
				margin-bottom: 0
				padding-bottom: 13px
				
				&:after
					display: block
					content: ""
					font-family: $font-icon
					position: absolute
					right: 0
					top: 1px
				&.active:after
					content: ""
			a
				color: $light-text-color
		ul
			li
				padding-bottom: 8px
				a
					font-weight: bold
					text-shadow: 1px 1px 0px rgba(0,0,0,0.4)
		#block_contact_infos
			border-left: 1px solid #515151
			// max 767px 
			@media (max-width: $screen-xs-max)
				border: none
			> div
				padding: 0 0 0 5px
				// max 767px 
				@media (max-width: $screen-xs-max)
					padding-left: 0
				ul
					li
						padding: 0 0 7px 4px
						overflow: hidden
						line-height: 30px
						> span,
						> span a
							color: $light-text-color
							font-weight: normal
						i
							font-size: 25px
							width: 32px
							text-align: center
							padding-right: 12px
							float: left
							color: #908f8f

		.blockcategories_footer
			clear: left
		#social_block
			float: left
			width: 50%
			padding: 22px 15px 0 15px
			// max 767px 
			@media (max-width: $screen-xs-max)
				width: 100%
				float: left
				padding-top: 5px													
			ul
				float: right
				@media (max-width: $screen-xs-max)
					float: none
				li
					float: left
					width: 40px
					text-align: center
					a
						display: inline-block
						color: #908f8f
						font-size: 28px
						span
							display: none
						&:before
							display: inline-block
							font-family: $font-icon
							vertical-align: -5px
						&:hover
							color: $light-text-color
					&.facebook
						a
							&:before
								content: ""
					&.twitter
						a
							&:before
								content: ""
					&.rss
						a
							&:before
								content: ""
			h4
				float: right
				margin-bottom: 0
				font-size: 21px
				line-height: 25px
				text-transform: none
				padding: 0 10px 0 0
				// max 767px 
				@media (max-width: $screen-xs-max)
					display: none
					text-align: center
		.bottom-footer
			position: absolute
			bottom: -55px
			left: 0
			div
				padding: 15px 0 0 0
				border-top: 1px solid #515151
				width: 100%

// Make sure lists are correctly displayed in tinyMCE BO edition mode too
#short_description_content ul,
#short_description_content ol,
#short_description_content dl,
#tinymce ul,
#tinymce ol,
#tinymce dl
	margin-left: 20px

.block_hidden_only_for_screen
	display: none

// PAIMENT - PAGE ORDER

//nav bottom
.cart_navigation
	margin: 0 0 20px
	.button-medium
		float: right
		@include border-radius(4px)
		font-size: 20px
		line-height: 24px
		span
			@include border-radius(4px)
			padding: 11px 15px 10px 15px
		i.right
			font-size: 25px
			line-height: 25px
			vertical-align: -4px
			margin-left: 6px
	.button-exclusive
		border: none
		background: none
		padding: 0
		font-size: 17px
		font-weight: bold
		color: $base-text-color
		margin: 9px 0 0 0
		i
			color: #777777
			margin-right: 8px
		&:hover, &:focus, &:active 
			color: $link-hover-color
			@include box-shadow(none)
	@media (max-width: $screen-xs)
		> span
			display: block
			width: 100%
			padding-bottom: 15px

// step 1 - cart
.cart_last_product
	display: none
.cart_quantity .cart_quantity_input
	height: 27px
	line-height: 27px
	padding: 0
	text-align: center
	width: 57px

.table
	tbody > tr > td
		vertical-align: middle
		&.cart_quantity
			padding: 41px 14px 25px
			width: 88px
			.cart_quantity_button 
				margin-top: 3px
				a
					float: left
					margin-right: 3px
					&+ a
						margin-right: 0
		&.cart_delete,
		&.price_discount_del
			padding: 5px
	tfoot > tr > td
		vertical-align: middle

.cart_delete a.cart_quantity_delete,
a.price_discount_delete
	font-size: 23px
	color: $base-text-color
	&:hover
		color: #c0c0c0

#cart_summary
	tbody
		td
			&.cart_product
				padding: 19px
				width: 137px
				img
					border: 1px solid $table-border-color
			&.cart_unit
				.price
					span
						display: block
						&.price-percent-reduction
							margin: 5px auto
							display: inline-block
						&.old-price
							text-decoration: line-through
			&.cart_description
				width: 480px
				small
					display: block
					padding: 5px 0 0 0
			&.cart_avail
	tfoot
		td
			&.text-right
				font-weight: bold
				color: $base-text-color	
			&.price
				text-align: right
			&.total_price_container
				span
					font: 600 18px/22px $font-custom
					color: #555454
					text-transform: uppercase
			&#total_price_container
				font: 600 21px/25px $font-custom
				color: $product-price-color
				background: $light-background

@media (max-width: 767px)
	#order-detail-content
		#cart_summary
			table, thead, tbody, th, td, tr
				display: block
			thead tr
				position: absolute
				top: -9999px
				left: -9999px
			tr
				border-bottom: 1px solid #ccc
				overflow: hidden
			td
				border: none
				position: relative
				width: 50%
				float: left
				white-space: normal
				&.cart_product
				&.cart_description
				&.cart_avail
					clear: both
				&.cart_unit
				&.cart_quantity
					clear: both
					padding: 9px 8px 11px 18px
				&.cart_total
				&.cart_delete
					width: 100%
					clear: both
					text-align: right
					&:before
						display: inline-block
						padding-right: 0.5em
						position: relative
						top: -3px
				div
					display: inline
			td:before
				content: attr(data-title)
				display: block
			tfoot
				td
					float: none
					width: 100%
					&:before
						display: inline
				tr
					.text-right, .price
						display: block
						float: left
						width: 50%

.cart_voucher
	vertical-align: top !important
	h4
		font: 600 18px/22px $font-custom
		color: $base-heading-color
		text-transform: uppercase
		padding: 7px 0 10px 0
	.title-offers
		color: $base-text-color
		font-weight: bold
		margin-bottom: 6px
	fieldset
		margin-bottom: 10px
		#discount_name
			float: left
			width: 219px
			margin-right: 11px
	#display_cart_vouchers
		span
			font-weight: bold
			cursor: pointer
			color: $link-color
			&:hover
				color: $link-hover-color

.enable-multishipping
	margin: -13px 0 17px
	label
		font-weight: normal

#HOOK_SHOPPING_CART
	#loyalty
		i
			font-size: 26px
			line-height: 26px
			color: #cfcccc
#order_carrier
	clear: both
	margin-top: 20px
	border: 1px solid #999
	background: $light-background
#order_carrier .title_block
	padding: 0 15px
	height: 29px
	font-weight: bold
	line-height: 29px
	color: $light-text-color
	font-weight: bold
	text-transform: uppercase
	background: url(../img/bg_table_th.png) repeat-x 0 -10px #999
#order_carrier span
	display: block
	padding: 15px
	font-weight: bold
.multishipping_close_container
	text-align: center
table#cart_summary .gift-icon
	color: white
	background: #0088CC
	line-height: 20px
	padding: 2px 5px
	border-radius: 5px

// step 3 - address
#multishipping_mode_box
	padding-top: 12px
	padding-bottom: 19px
	.title
		font-weight: bold
		color: $base-text-color
		margin-bottom: 15px

	.description_off
		display: none
		div
			margin-bottom: 10px

	.description_off a:hover,
	.description a:hover
		background: #f3f3f3
		border: 1px solid #ccc

#multishipping_mode_box.on .description_off
	display: block

.multishipping-cart
	.cart_address_delivery 
		&.form-control
			width: 198px

#order .address_add.submit
	margin-bottom: 20px
#ordermsg
	margin-bottom: 30px

#id_address_invoice.form-control,
#id_address_delivery.form-control
	width: 269px
.checkbox.addressesAreEquals
	margin: 0 0 25px 0

// step 4 - paiement
#order .delivery_option,
#order-opc .delivery_option
	> div
		display: block
		margin-bottom: 20px
		font-weight: normal
		> table
			background: $light-background
			margin-bottom: 0
			&.resume
				height: 53px
				&.delivery_option_carrier
					margin-top: 10px
					width: 100%
					background: $state-info-bg
					color: $state-info-text
					border: 1px solid $state-info-border
					font-weight: bold
					td
						padding: 8px 11px 7px 11px
						i
							font-size: 20px
							margin-right: 7px
							vertical-align: -2px
				td
					&.delivery_option_radio
						width: 54px
						padding-left: 0
						padding-right: 0
						text-align: center
					&.delivery_option_logo
						width: 97px
						padding-left: 21px
					&.delivery_option_price
						width: 162px

.order_carrier_content
	line-height: normal
	padding-bottom: 16px
	.carrier_title
		font-weight: bold
		color: $base-text-color
	.checkbox
		input
			margin-top: 2px
	.delivery_options_address
		.carrier_title
			margin-bottom: 17px
	& + div
		padding-bottom: 15px	

#carrierTable
	border: 1px solid #999
	border-bottom: none
	background: $light-background

#carrierTable tbody
	border-bottom: 1px solid #999

#carrierTable th
	padding: 0 15px
	height: 29px
	font-weight: bold
	line-height: 29px
	color: $light-text-color
	text-transform: uppercase
	background: url(../img/bg_table_th.png) repeat-x 0 -10px #999
#carrierTable td
	padding: 15px
	font-weight: bold
	border-right: 1px solid #e9e9e9

#carrierTable  td.carrier_price
	border: none
p.checkbox.gift
	margin-bottom: 10px

#gift_div
	display: none
	margin-top: 5px
	margin-bottom: 10px

a.iframe
	color: $base-text-color
	text-decoration: underline
	&:hover
		text-decoration: none

//step 5 - paiement
p.payment_module
	margin-bottom: 10px
	a
		display: block
		border: 1px solid $table-border-color
		@include border-radius(4px)
		font-size: 17px
		line-height: 23px
		color: $base-text-color
		font-weight: bold
		padding: 33px 40px 34px 99px
		letter-spacing: -1px
		position: relative
		&.bankwire
			background: url(../img/bankwire.png) 15px 12px no-repeat $base-box-bg
		&.cheque
			background: url(../img/cheque.png) 15px 15px no-repeat $base-box-bg
		&.cheque, &.bankwire
			&:after
				display: block
				content: ""
				position: absolute
				right: 0px
				margin-top: -11px
				top: 50%
				font-family: $font-icon
				font-size: 25px
				height: 22px
				width: 14px
				color: $link-color
		&:hover
			background-color: #f6f6f6
		span
			font-weight: bold
			color: $base-body-color

.payment_module.box
	margin-top: 20px
p.cheque-indent
	margin-bottom: 9px
.cheque-box
	.form-group
		margin-bottom: 0px
		.form-control
			width: 269px

.order-confirmation.box
	line-height: 29px
	a
		text-decoration: underline
		&:hover
			text-decoration: none

//PAGE ORDER-OPC
.delivery_option_carrier td
	width: 200px
.delivery_option_carrier td + td
	width: 280px
.delivery_option_carrier td + td + td
	width: 200px
.delivery_option_carrier tr td
	padding: 5px
.delivery_option_carrier.selected
	display: table
.delivery_option_carrier.not-displayable
	display: none


//PAGES ADRESSES, IDENTITY
#address,
#identity,
#account-creation_form,
#new_account_form,
#opc_account_form,
#authentication
	.box
	padding-bottom: 20px
	line-height: 20px
	p.required
		color: #f13340
		margin: 9px 0 16px 0
	p.inline-infos
		color: #f00
	.form-group 
		margin-bottom: 4px
		.form-control
			max-width: 271px
			&#adress_alias
				margin-bottom: 20px
		&.phone-number
			// min 1200px
			@media (min-width: $screen-lg)	
				float: left
				width: 270px
				margin-right: 13px
			+ p
				@media (min-width: $screen-lg)	
					padding: 23px 0 0 0px
					margin-bottom: 0
	.gender-line
		margin-bottom: 4px
		padding-top: 4px
		> label
			margin-right: 10px
			margin-bottom: 0	
		.radio-inline
			label
				font-weight: normal
				color: #777
#identity,
#authentication,
#order-opc
	#center_column
		form.std
			.row
				margin-left: -5px
				margin-right: -5px
				.col-xs-4
					padding-left: 5px
					padding-right: 5px
					max-width: 94px
					.form-control
						max-width: 84px
		.footer_links
			border: none
			padding-top: 0

#new_account_form .box
	line-height: 20px
	.date-select
		padding-bottom: 10px
	.top-indent
		padding-top: 10px
	.customerprivacy
		padding-top: 15px

#authentication
	fieldset.account_creation
	margin-bottom: 20px

// PASSWORD
#password
	.box
		p
			margin-bottom: 9px
		.form-group
			margin-bottom: 20px
			.form-control
				width: 263px
	.footer_links
	padding-top: 0
	border: none

//PAGE SEARCH
#instant_search_results
	a.close
		font-size: 13px
		font-weight: 600
		opacity: 1
		line-height: inherit
		text-transform: none
		font-family: $font-famaly
		&:hover
			color: $link-hover-color

// MANUFACTURERS/SUPPLIERS
#manufacturers_list,
#suppliers_list
	h3
		font-size: 17px
		line-height: 23px	
	.description
		line-height: 18px
	.product-counter
		a
			font-weight: bold
			color: $base-text-color
			&:hover
				color: $link-hover-color	
	&.list
		li
			.mansup-container
				border-top: 1px solid $base-border-color
				padding: 31px 0 30px 0
				// < 768 
				@media (max-width: $screen-xs-max)
					text-align: center
			&:first-child
				.mansup-container
					border-top: 0
			.left-side
				text-align: center
			
			h3
				margin-top: -5px
				padding-bottom: 8px
			.middle-side
				padding-left: 0
				// < 768
				@media (max-width: $screen-xs-max)
					padding-right: 15px
					padding-left: 15px
			.right-side-content
				border-left: 1px solid $base-border-color
				padding: 0 0 32px 31px
				min-height: 108px
				// < 768
				@media (max-width: $screen-xs-max)
					min-height: 1px
					padding: 0
					border: none
				.product-counter
					position: relative
					top: -6px
					margin-bottom: 12px
					// < 768
					@media (max-width: $screen-xs-max)
						top: 0
	&.grid
		li
			text-align: center
			
			.product-container
				padding-top: 40px
				padding-bottom: 20px
				border-bottom: 1px solid $base-border-color
				.left-side
					padding-bottom: 42px
				h3
					padding-bottom: 10px
				.product-counter
					margin-bottom: 12px
		// > 1199 
		@media (min-width: $screen-lg)
			li.first-in-line
				clear: left
			li.last-line
				.product-container
					border-bottom: none
		//768 -> 1199
		@media (min-width: $screen-sm) and  (max-width: $screen-md-max)
			li.first-item-of-tablet-line
				clear: left
			li.last-tablet-line
				.product-container
					border-bottom: none
		// < 768 
		@media (max-width: $screen-xs-max)
			li.item-last
			.product-container
				border-bottom: none

#manufacturer,
#supplier
	.description_box
		padding-top: 20px
		padding-bottom: 20px
		border-top: 1px solid $base-border-color
		.hide_desc
			display: none
	.bottom-pagination-content,
	.top-pagination-content
		min-height: 69px
	.top-pagination-content.bottom-line
		border-bottom: 1px solid $base-border-color

//DISCOUNT PAGE
table.discount
	i
		font-size: 20px
		line-height: 20px
		vertical-align: -2px
		&.icon-ok
			color: #46a74e
		&.icon-remove
			color: #f13340

//GUEST TRACKING
#guestTracking
	.form-control
		max-width: 271px
	// > 1200px 
	@media (min-width: $screen-lg)
		.form-group
			overflow: hidden
			i
				padding-left: 10px
		.form-control
			float: left
		label
			float: left
			clear: both
			width: 100%

//PAGE 404
#pagenotfound
	.pagenotfound
		max-width: 824px
		margin: 0 auto
		text-align: center
		.img-404
			padding: 8px 0 27px 0
			img
				max-width: 100%
		h1
			font: 600 28px/34px $font-custom
			color: $base-text-color
			text-transform: uppercase
			margin-bottom: 7px
		p
			font: 600 16px/20px $font-custom	
			color: #555454
			text-transform: uppercase
			border-bottom: 1px solid $base-border-color
			padding-bottom: 19px
			margin-bottom: 20px
		h3
			font-weight: bold
			color: $base-text-color
			font-size: 13px
			line-height: normal
			margin-bottom: 18px
		
		label
			font-weight: normal
			@media (max-width: $screen-xs-max)
				display: block
		.form-control
			max-width: 293px
			display: inline-block
			margin-right: 5px
			// max 767px
			@media (max-width: $screen-xs-max)
				margin: 0 auto 15px auto
				display: block												
		.buttons
			padding: 48px 0 20px 0
			.button-medium
				i.left
					font-size: 17px

//addon RerversoForm
#account-creation_form fieldset.reversoform
	padding: 10px !important
#account-creation_form fieldset.reversoform .text label
	display: block
	padding: 0 0 10px 0
	width: 100%
	text-align: left

#account-creation_form fieldset.reversoform .infos-sup
	padding: 0 !important
	font-size: 10px
	font-style: italic
	text-align: right

//addon customer privacy
#account-creation_form fieldset.customerprivacy label,
fieldset.customerprivacy label
	cursor: pointer

//addon referralprogram
.tab-content
	margin-top: 20px

//addons comments products
form#sendComment fieldset
	padding: 10px
	border: 1px solid #ccc
	background: #eee

form#sendComment h3
	font-size: 14px
#new_comment_form p.text
	margin-bottom: 0
	padding-bottom: 0

#sendComment p.text label,
#sendComment p.textarea label
	display: block
	margin: 12px 0 4px
	font-weight: bold
	font-size: 12px

#sendComment p.text input
	padding: 0 5px
	height: 28px
	width: 498px
	border: 1px solid #ccc
	background: url(../img/bg_input.png) repeat-x 0 0 $light-background

#sendComment p.textarea textarea
	height: 80px
	width: 508px
	border: 1px solid #ccc

#sendComment p.submit
	padding: 0
	text-align: right

#sendComment p.closeform
	float: right
	padding: 0
	height: 12px
	width: 12px
	text-indent: -5000px
	background: url(../img/icon/delete.gif) no-repeat 0 0
.star
	position: relative
	top: -1px
	float: left
	width: 14px
	overflow: hidden
	cursor: pointer
	font-size: 14px
	font-weight: normal
.star
	display: block
	a
		display: block
		position: absolute
		text-indent: -5000px
div.star
	&:after
		content: ""
		font-family: $font-icon
		display: inline-block
		color: #777676

div.star.star_on
	display: block
	&:after
		content: ""
		font-family: $font-icon
		display: inline-block
		color: #ef8743	

div.star.star_hover
	&:after
		content: ""
		font-family: $font-icon
		display: inline-block
		color: #ef8743


//CSS Modules
//IMPORTANT - Internet Explorer can read 31 CSS files max. Some CSS have been put here and erased from their own module folder.

//Block ADVERTISING
.advertising_block
	width: 191px
	margin-bottom: 1em
	text-align: center

//footer
.blockcategories_footer ul ul
	display: none !important

//Form validate
.form-group
	&.form-error
		input, textarea
			border: 1px solid #f13340
			color: #f13340
			background: url(../img/icon/form-error.png) 98% 5px no-repeat #fff1f2
	&.form-ok
		input, textarea
			border: 1px solid #46a74e
			color: #35b33f
			background: url(../img/icon/form-ok.png) 98% 5px no-repeat #ddf9e1
	&.form-error, &.form-ok
		.form-control
			padding-right: 30px

//uniform
.radio-inline, .checkbox 
	padding-left: 0
	.checker
		float: left
		span
			top: 0px
	div.radio
		display: inline-block
		span
			float: left
			top: 0px

.fancybox-skin
	background: $light-background !important

.fancybox-skin .fancybox-close
	top: 8px
	right: 8px
	width: 28px
	height: 28px
	background: none
	font-size: 28px
	line-height: 28px
	color: $base-text-color
	text-align: center
	&:hover 
		color: $link-hover-color
	&:after
		content: ""
		font-family: $font-icon

//Homepage pre-footer
#facebook_block,
#cmsinfo_block
	margin-top: 40px
	overflow: hidden
	background: $homepage-footer-bg
	min-height: 344px
	padding-right: 29px
	padding-left: 29px
	// max 991px
	@media (max-width: $screen-sm-max)
		padding-left: 15px
		padding-right: 15px
	// max 767px
	@media (max-width: $screen-xs-max)
		width: 100%
		min-height: 1px
	h4
		font: 600 21px/25px $font-custom
		color: $base-heading-color
		margin-bottom: 26px
		// max 991px 
		@media (max-width: $screen-sm-max)
			font-size: 16px
		// max 767px
		@media (max-width: $screen-xs-max)
			padding-top: 20px !important
#facebook_block
	h4
		padding-top: 44px
	.facebook-fanbox
		background: $light-background
		border: 1px solid #aaaaaa
		padding-bottom: 10px
#cmsinfo_block
	border-left: 1px solid $homepage-footer-border
	// max 767px
	@media (max-width: $screen-xs-max)
		border: none
		margin-top: 10px
	> div
		padding-top: 45px
		padding-left: 0
		// max 767px
		@media (max-width: $screen-xs-max)
			padding-top: 20px
		// max 479px
		@media (max-width: $screen-xs - 1)
			width: 100%
			border-top: 1px solid $homepage-footer-border
	> div + div
		border-left: 1px solid $homepage-footer-border
		min-height: 344px
		padding-left: 29px
		// max 479px
		@media (max-width: $screen-xs - 1)
			border-left: none
			padding-left: 10px
			min-height: 1px
			padding-bottom: 15px
		h3
			margin-bottom: 12px
	em
		float: left
		font-size: 35px
		color: $light-text-color
		width: 59px
		height: 59px
		line-height: 59px
		text-align: center
		background: $dark-background
		@include border-radius(100px)
		margin: 3px 10px 0 0
		// max 991px 
		@media (max-width: $screen-sm-max)
			width: 30px
			height: 30px
			line-height: 30px
			font-size: 20px
	.type-text
		overflow: hidden
	h3
		font: 600 21px/25px $font-custom
		color: $base-heading-color
		// max 1199px
		@media (max-width: $screen-md-max)
			font-size: 18px
	ul
		li
			padding-bottom: 22px
			// max 1199px
			@media  (max-width: $screen-md-max)
				padding-bottom: 10px
			// max 991px 
			@media (max-width: $screen-sm-max)
				padding-bottom: 0
.ie8
	#facebook_block,
	#cmsinfo_block
		height: 344px
//Zoom
// max 1199px 
@media  (max-width: $screen-md-max)
	.zoomdiv
		display: none !important