// breaking things

2013-08-20 16:38:31 +02:00
parent f73f84dbf2
commit 44655ecdef
18 changed files with 3561 additions and 2936 deletions
@@ -2,10 +2,6 @@
  "name": "admin-theme",
  "version": "0.0.0",
  "dependencies": {
-    "requirejs": "~2.1.4",
-    "modernizr": "~2.6.2",
-    "jquery": "~1.9.1",
-    "bootstrap": "https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip",
    "font-awesome": "~3.2.1-wip",
    "sass-twitter-bootstrap": "https://github.com/jlong/sass-twitter-bootstrap/archive/3.0.0-wip.zip"
  },
@@ -1,4 +1,4 @@
-//light
+//light #F7F7F7
 //$main-color: #DBD8CF 			//sable
 //$main-color: #CFD7DD			//bleu
 //$main-color: #E0E0E0
@@ -15,7 +15,8 @@
 //$main-color: #373E35 			//vert camo
 //$main-color: #262C3F 			//bleu nuit  - pretty sure that a girl could do better naming the colors, sorry about that...
 //$main-color: white
-$main-color: #8C8574
+//$main-color: #8C8574
+$main-color: #3A3A4A

 //$secondary-color: white		//blanc
 //$secondary-color: #F5792B		//orange
@@ -36,7 +37,8 @@ $main-color: #8C8574
 //$secondary-color: #8BC954 	//vert PrestaShop

 //some tests
-$secondary-color: #79C09D
+$secondary-color: #00A89C
+//$secondary-color: #79C09D
 //$secondary-color: invert($main-color)
 //$secondary-color: lighten(invert($main-color),20%)
 //$secondary-color: adjust-hue($main-color, 80%)
@@ -60,7 +62,7 @@ $bg-content-color: #F8F8F8 	//gris
 $bg-header-color: #242424
 $bg-footer-color: #242424
 $bg-page-head-color : $secondary-color
-$bg-panel-heading-color: lighten($secondary-color,30%)
+$bg-panel-heading-color: hsl(hue($secondary-color), 20, 90)

 //others
 $badge-notif-color: #EF1778
@@ -68,6 +70,7 @@ $icon-color: #87C795

@import "compass"
@import "bootstrap/variables"
+//@import "bootstrap.min.css"
@import "bootstrap"
@import "font-awesome"
@import "toggle-switch"
@@ -95,21 +98,22 @@ body.fixed-top
 #main
 	min-height: 100%
 	height: auto!important
-	padding: 35px 0 60px
-	margin: 0 0 -60px
+	padding: 38px 0 60px
+	margin: 0 0 -60px 0
+	background-color: $bg-content-color

 .container-fluid, .row-fluid
 	width: 100%

 #content
-	min-height: 900px
-	padding: 90px 20px 20px
+	padding: 90px 20px 100px
 	margin-left: 240px
 	@include transition-property(margin)
 	@include transition-duration(0.4s)
 	@include transition-timing-function(ease-out)
-	background-color: $bg-content-color
-	background-image: url('../img/patterns/bedge_grunge.png') // texture
+	
+	//overflow-x: scroll
+	//background-image: url('../img/patterns/bedge_grunge.png') // texture
 	fieldset, .panel
 		padding: 20px
 		margin-bottom: 20px
@@ -120,12 +124,13 @@ body.fixed-top
 	.panel-heading
 		@extend h3
 	h3, .panel-heading
+		border: none
 		height: 30px
 		padding: 0 5px
 		margin: -16px -16px 15px -16px
-		line-height: 30px
 		color: contrasted($bg-panel-heading-color)	
 		font-size: 1.2em
+		line-height: 30px
 		font-weight: 300
 		text-transform: uppercase
 		background-color: $bg-panel-heading-color
@@ -157,26 +162,31 @@ body.fixed-top
 			border: none
 			border-bottom: solid 1px darken($bg-content-color,10%)
 			@include box-shadow(white 0 0 0 1px inset)
+	@media (max-width: $screen-tablet)
+		margin-left: 0
+		width: 100%
+

 .page-head
 	width: 100%
-	height: 65px
-	padding: 5px 10px 0 0
+	height: 55px
+	padding: 0 10px 0 0
 	margin: 0
 	border-bottom: 4px solid darken($secondary-color,10%)
 	position: fixed
-	top: 37px
+	top: 38px
 	left: 0px
-	z-index: 9000
+	z-index: 499
 	background-color: $secondary-color
-	@include box-shadow(rgba(black,0.15) 0 7px 0, rgba(white,0.15) 0 -1px 0 inset)
+	@include box-shadow(rgba(black,0.15) 0 7px 0)
 	h2.page-title
 		@extend .pull-left
 		padding: 0 0 0 260px
 		font-size: 20px
-		line-height: 25px
 		color: white
 		text-transform: uppercase
+		@media (max-width: $screen-tablet)
+			padding: 0 0 0 20px
 	.btn-toolbar
 		margin: 0
 		.nav-tabs
@@ -188,11 +198,23 @@ body.fixed-top
 				//background: #f5f5f5

 #sidebar
-	z-index: 9001
+	height: 100%!important
+	z-index: 500
 	float: left
 	width: 240px
 	background-color: $main-color
 	border-bottom: 1px solid lighten($main-color,5%)
+	.menu
+		border-top: 1px black solid
+		.maintab > a [class^="icon-"], .menu .maintab > a [class*=" icon-"]
+			font-size: 20px
+			border-radius: 40px
+			height: 30px
+			width: 30px
+			color: white
+			display: inline-block
+			text-align: center
+			line-height: 30px
 	> ul > li > ul.sub-menu
 		display: none
 		list-style: none
@@ -212,28 +234,29 @@ body.fixed-top
 				background-color: white
 		> li
 			&.active > a
-				color: contrasted($main-color, 30%)
+				color: contrast-color($main-color, white, #333, 10%)
 				background-color: $secondary-color
-				border-top: 1px solid lighten($secondary-color,10%)
-				border-bottom: 1px solid darken($secondary-color,10%)
+				border-top: 1px solid lighten($secondary-color,5%)
+				border-bottom: 1px solid darken($secondary-color,20%)
 				@include box-shadow(darken($secondary-color,10%) -4px 0 0 inset)
 				i
 					color: $brand-primary!important
 					background-color: white
 			&.active:hover > a
-				color: white
+				color: contrast-color($main-color, white, #333, 10%)
 				@include box-shadow(darken($secondary-color,10%) -4px 0 0 inset)
 			&:hover > a
-				
 				@include box-shadow($brand-primary -4px 0 0 inset)
 				i
-					color: $brand-primary!important
+					color: $secondary-color!important
 					background-color: white
 			> a
 				display: block
-				padding: 3px 0 3px 5px
+				padding: 2px 0 2px 8px
 				border-top: 1px solid lighten($main-color,5%)
 				border-bottom: 1px solid darken($main-color,10%)
+				font-size: 12px
+				line-height: 28px
 				$color: contrast-color($main-color, white, #333, 10%)
 				color:  mix($main-color, $color, 30%)
 				background-color: $main-color
@@ -258,12 +281,12 @@ body.fixed-top
 				li 
 					a
 						display: block
-						padding: 3px 5px 3px 10px
+						padding: 2px 5px 2px 10px
 						font-size: 12px
 						border: none
 						border-bottom: solid 1px #eee
 						background-color: white
-						@include box-shadow($main-color -4px 0 0 inset)
+						//@include box-shadow($main-color -4px 0 0 inset)
 						i
 							margin-top: 3px
 							color: $secondary-color
@@ -271,7 +294,7 @@ body.fixed-top
 							color: $brand-primary
 							background-color: mix(white, $main-color, 90%)
 							text-decoration: none
-							@include box-shadow($brand-primary -4px 0 0 inset)
+							//@include box-shadow($brand-primary -4px 0 0 inset)
 							i
 								color: $main-color
 					&.active
@@ -284,7 +307,6 @@ body.fixed-top
 .page-sidebar-closed
 	#sidebar
 		width: 50px
-		white-space: nowrap
 		@include transition-property(width)
 		@include transition-duration(0.4s)
 		@include transition-timing-function(ease-out)
@@ -302,34 +324,28 @@ body.fixed-top
 				position: absolute
 				left: 50px
 				width: 200px!important
-
 	#content
 		margin-left: 50px
 		.page-head h2.page-title
 			padding: 0 0 0 70px
+			@media (max-width: $screen-tablet)
+				padding: 0 0 0 20px
+		@media (max-width: $screen-tablet)
+			margin-left: 0
+			width: 100%

 .menu-collapse
-	height: 67px
+	height: 55px
 	width: 100%
 	font-size: 2em
 	text-align: center
-	line-height: 68px
+	line-height: 55px
 	display: block
-	background-color: darken($secondary-color,5%)
-	border-bottom: 4px solid darken($secondary-color,15%)
+	background-color: darken($secondary-color,10%)
+	border-bottom: 4px solid darken($secondary-color,20%)
 	i
 		color: lighten($secondary-color,10%)

-#menu .maintab > a [class^="icon-"], #menu .maintab > a [class*=" icon-"]
-	font-size: 22px
-	border-radius: 40px
-	height: 35px
-	width: 35px
-	color: white
-	display: inline-block
-	text-align: center
-	line-height: 35px
-
 // Tool bar
 .toolbar_btn
 	position: relative
@@ -391,7 +407,7 @@ body.fixed-top
 	color: lighten($main-color,10%)!important

 [class^="process-icon-"], [class*=" process-icon-"]
-	height: 32px
+	height: 25px
 	min-width: 32px
 	background-position: center
 	background-repeat: no-repeat
@@ -400,7 +416,7 @@ body.fixed-top
 	font-weight: normal
 	font-style: normal
 	font-size: 25px
-	line-height: 32px
+	line-height: 25px
 	text-decoration: inherit
 	-webkit-font-smoothing: antialiased
 	*margin-right: .3em
@@ -456,8 +472,6 @@ body.fixed-top
 .process-icon-new-url
 	@extend .icon-plus-sign-alt

-
-
 .navbar-inner
 	box-shadow: none!important
 	.input-append
@@ -506,7 +520,6 @@ input[type="password"].input-tiny
 .fixed-width-XL
 	width: 200px

-
 .btn-group-action
 	display: inline-block
 	white-space: nowrap
@@ -543,7 +556,6 @@ input[type="password"].input-tiny
 		.caret
 			border-top-color: white!important

-
 hr
 	border-color: darken($bg-content-color,10%)
 	border-bottom: 1px solid white
@@ -601,10 +613,9 @@ hr

 //filter table
 tr.filter
-	background-color: rgba(#A39F95,0.5)
+	background-color: darken($bg-content-color,20%)
 	input[type="text"].filter, input[type="password"].filter, select.filter
 		font-size: 12px
-		border-color: #A39F95

 .breadcrumb
 	background-color: lighten($bg-content-color,7%)
@@ -637,10 +648,11 @@ tr.filter
 		font-weight: 500

 #footer
+	z-index: 600
+	min-height: 60px
 	display: block
 	width: 100%
-	height: 60px
-	padding: 5px 0
+	padding: 15px 0 0 0
 	background-color: $bg-footer-color
 	color: #888
 	a
@@ -688,3 +700,114 @@ tr.filter

 #nobootstrap
 	float: left
+
+.box-stats
+	padding: 10px
+	margin-bottom: 20px
+	background-color: white
+	@include box-shadow(rgba(black,0.10) 0 2px 0, white 0 0 0 3px inset)
+	.boxchart-overlay
+		padding: 10px
+		margin-right: 10px
+		float: left
+		color: white
+		@include border-radius(3px)
+	i
+		@include border-radius(3px)
+		float: left
+		color: white
+		font-size: 30px
+		height: 50px
+		width: 50px
+		text-align: center
+		line-height: 50px
+		margin-right: 10px
+	.title
+		color: #999
+		display: block
+	.value
+		font-size: 25px
+.color1
+	i, .boxchart-overlay
+		background-color: #2BA8E3
+		@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
+	.value
+		color: #2BA8E3
+.color2
+	i, .boxchart-overlay
+		background-color: #FF5450
+		@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
+	.value
+		color: #FF5450
+.color3
+	i, .boxchart-overlay
+		background-color: #9E5BA1
+		@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
+	.value
+		color: #9E5BA1
+.color4
+	i, .boxchart-overlay
+		background-color: #95CC6B
+		@include box-shadow(rgba(black,0.15) 0 -3px 0 inset)
+	.value
+		color: #95CC6B
+
+.chart
+	rect
+		fill: white
+	path
+		stroke: white
+		stroke-width: 2
+		fill: none
+	line
+		stroke: black
+	.area
+		fill: rgba(white,0.30)
+		stroke-width: 0
+
+.highlighted
+	background-color: blue
+
+.notification-panel
+	@extend .panel
+	padding: 15px
+	margin: 0
+	width: 300px
+	@include box-shadow(rgba(black,0.50) 2px 2px 10px)
+
+.notification-dropdown
+	background-color: transparent
+	border: none
+	box-shadow: none
+
+.list-toolbar-btn
+
+
+//WIP
+#topbar
+	position: fixed
+	left: 80
+	width: 100%
+	height: 25px
+	z-index: 600
+	background-color: $main-color
+	border-top: black solid 1px
+	border-bottom: black solid 1px
+	a
+		line-height: 25px
+		color: white
+		i
+			height: 25px
+			width: 25px
+			line-height: 25px
+			color: white
+			font-size: 20px
+	.menu-collapse
+		display: none
+	.menu
+		padding: 0 0 0 60px
+		display: inline
+		li
+			display: inline
+	.submenu
+		display: none
@@ -1,4 +1,4 @@
-#nobootstrap{
+#nobootstrap {
 	body {font-family: Arial, Helvetica, sans-serif;}

 	h1, h2, h3, h4  { font-family: Arial, Helvetica, sans-serif; margin-bottom:.5em; line-height:1.4em; }
@@ -7,12 +7,11 @@
 	h4  { font-size:1.05em; }
 	h6  { font-size:1em; }

-
-	/*LIST*/
-	ul,ol {list-style:none; margin: 0; padding: 0;}
+	//LIST
+	ul, ol {list-style:none; margin: 0; padding: 0;}
 	ul li {color:#585A69;}

-	/*FORM*/
+	//FORM
 	label {color:#585a69;text-shadow:0 1px 0#fff;}
 	fieldset{background-color:#EBEDF4; border:1px solid #CCCED7; color:#585A69; font-size:1.1em;margin:0;padding:1em}
 	.Bloc {background-color:#EBEDF4; border:1px solid #CCCED7;font-size:1.1em;margin:0;padding:1em}
@@ -28,7 +27,7 @@
 	.icon {vertical-align:middle}
 	.icon-top {vertical-align:top}

-	/*BUTTON*/
+	//BUTTON
 	.button{
 		background: #e3e3e3 url('../img/bg-button-degrade.png') repeat-x scroll left top;
 		background: -moz-linear-gradient(center top , #F9F9F9, #E3E3E3) repeat scroll 0 0 transparent;
@@ -45,11 +44,11 @@

 	#top_container{margin:0;padding:0}

-	/*HEADER*/
+	//HEADER
 	#header { background-color: #394049; height:90px; }
-	/* Portrait orientation targeting */ 
+	// Portrait orientation targeting  
 	@media screen and (orientation: portrait) {#header{min-width:1250px}}
-	/* Portrait orientation targeting */ 
+	// Portrait orientation targeting  
 	@media screen and (orientation: landscape) {#header{min-width:1250px}}
 	#header #header_infos{ position:relative; margin: 0; padding:0; height:60px; }
 	#header #header_shopname {float: left; margin:10px 15px 0 10px;}
@@ -76,7 +75,7 @@
 	#header #header_search #bo_query{ font: 13px Arial,sans-serif; float:left;background: none repeat scroll 0 0 transparent;  border:none; box-shadow:none;  padding: 5px 0px 5px 4px; width: 160px; }
 	#header #header_search #bo_search_type_chzn{ font-size:13px; float:left; margin:0 23px 0 0; padding:0 4px; vertical-align:middle;width:80px !important;height:27px; border:none;}
 	#header #header_search #bo_search_type_chzn.chzn-container-single .chzn-single { box-shadow:none; border-radius:0px; border:none; border-left:1px dotted #ccc;} 
-	#header #header_search #bo_search_submit { background:  url('../img/icon-search2.png') no-repeat scroll center; border:none; width:27px; height:25px; float:left; font-weight:normal; margin:0; padding:0; cursor:pointer; text-indent:-9999em; position:absolute; right:0; display:block; border-left:1px solid #3079ED; border-radius:0px; /*hacking ie7font-size: 0!ie7; color: transparent!ie;*/ }
+	#header #header_search #bo_search_submit { background:  url('../img/icon-search2.png') no-repeat scroll center; border:none; width:27px; height:25px; float:left; font-weight:normal; margin:0; padding:0; cursor:pointer; text-indent:-9999em; position:absolute; right:0; display:block; border-left:1px solid #3079ED; border-radius:0px;}
 	#header #header_quick{float:right; display:block; margin-top:15px;}
 	#header #header_quick #quick_select_chzn{ font-size:13px; margin:0 10px 0 0; padding:0px 0 4px;  }
 	#header #header_myaccount{background:url('../img/bg-lang.png') no-repeat;display:block;float:right;height:16px;margin:8px 1px 0 0;width:16px}
@@ -104,7 +103,7 @@
 	.notifs_wrapper p.no_notifs {border: none;}


-	/*MENU*/
+	//MENU
 	#header #menu{ background-color: #f8f8f8; border-bottom:1px solid #e5e5e5; float:left;line-height:normal;margin:0;padding:0;width:100%;}
 	#header #menu li.maintab{float:left;height:29px;list-style:none;list-style:none;display:block; border-left:1px solid #fff; border-right:1px solid #ccc;}
 	#header #menu li.submenu_size .title{cursor:default;color:#000;display:block; padding:8px 3px 4px 0;font-weight:normal;font-size:12px;}
@@ -124,10 +123,10 @@
 	#header #menu .submenu li.active a { color: #fff;}
 	#header #menu .submenu li.active a:hover { color:#666666}

-	/*SEPARATION*/
+	//SEPARATION
 	.separation { background-color:#ccc;border-bottom:1px solid #fff; width:100%; height:1px; margin:10px 0;}

-	/*TABLE*/
+	//TABLE
 	.table_grid {width:100%;}
 	.table{ background-color:#fff;border:1px solid #ccc; padding:0; border-radius:3px; -moz-border-radius:3px;-webkit-border-radius:3px;}
 	.filter {background-color:#f1f9ff;}
@@ -182,17 +181,17 @@
 	.button-autoupgrade {-moz-border-bottom-colors: none;-moz-border-image: none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;border-color: #FFF6D3 #DFD5AF #DFD5AF #FFF6D3;border-right: 1px solid #DFD5AF;border-style: solid;border-width: 1px;color: #268CCD;font-size: medium;padding: 5px;}
 	.processing {overflow: auto;}

-	/*UI ACCORDEON*/
+	//UI ACCORDEON
 	.ui-accordion-header { background-color: #ccc; color:#000;}

-	/*BLOC*/
+	//BLOC
 	.Bloc { background: none repeat scroll 0 0 #EBEDF4;}


-	/*TABLE STATUS COMMANDE*/
+	//TABLE STATUS COMMANDE
 	.table td span.color_field { font-size:11px; padding:2px 5px; border-radius:3px; text-transform:uppercase; color:#fff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}

-	/*multishop toolbar*/
+	//multishop toolbar
 	.multishop_toolbar { background-color: #F8F8F8; border: 1px solid #CCCCCC; margin-bottom:10px; padding: 10px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; font-size: 18px;}
 	.multishop_toolbar span.text_multishop {vertical-align: 7px; padding-right: 5px; }
 	.multishop_toolbar select.shopList { width: 300px; }
@@ -202,7 +201,7 @@
 	.multishop_toolbar .chzn-container .chzn-results .group{font-weight: bold;font-style: italic;padding-left: 15px;background-color: #C6DEFC;}
 	.multishop_toolbar .chzn-container .chzn-results .shop{padding-left: 30px;background-color: #EAF2FC;}

-	/*toolbarBox*/
+	//toolbarBox
 	.toolbar-placeholder {position:relative}
 	.toolbarBox {background-color: #F8F8F8; border: 1px solid #CCCCCC; margin-bottom:10px; padding: 5px 0; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;-o-border-radius:3px;position:relative}
 	.toolbarBox .pageTitle { margin-left:10px; line-height:48px}
@@ -211,7 +210,7 @@
 	.toolbarBox ul.cc_button li {color: #666666; float: left; height: 48px; list-style: none outside none; padding: 1px 1px 3px 4px; text-align: center;}
 	.toolbarBox a.toolbar_btn {   border:1px solid #f8f8f8; min-width:50px; border-width: 1px; font-size:11px;cursor: pointer; display: block; float: left; padding: 3px 5px; white-space: nowrap; text-shadow: 0 1px 0 #ffffff;}
 	.toolbarBox a.toolbar_btn:hover { background-color:#fff; border:1px inset #ccc; border-radius:3px;-moz-border-radius:3px; -webkit-border-radius:3px;-o-border-radius:3px;}
-	.toolbarBox .toolbar_btn span{ display: block; float: none; height: 32px; margin: 0 auto; width: 32px; /*hacking ie7margin:0 !ie; position:relative !ie;*/ }
+	.toolbarBox .toolbar_btn span{ display: block; float: none; height: 32px; margin: 0 auto; width: 32px}
 	.toolbarBox .process-icon-delete { background-image: url('../img/process-icon-delete.png');}
 	.toolbarBox .process-icon-duplicate { background-image: url('../img/process-icon-duplicate.png');}
 	.toolbarBox .process-icon-preview { background-image: url('../img/process-icon-preview.png');}
@@ -314,11 +313,9 @@
 	}


-
-
 	div.fix-toolbar {border-bottom: 1px solid #E0E0E0;position:fixed;top:0;opacity:0.9;z-index:500;margin:auto}

-	/*button upload files*/
+	//button upload files
 	#content .qq-upload-button {
 		background: #e4e4e4 url('../img/bg-button-degrade.png') repeat-x scroll left top;
 		background: -moz-linear-gradient(center top , #F9F9F9, #E3E3E3) repeat scroll 0 0 transparent;
@@ -338,14 +335,14 @@

 	.file_upload_label {margin-top:5px;}

-	/*leadin*/
+	//leadin
 	.leadin {}
 	.leadin .bloc-leadin{ padding:10px 3px;}

-	/*productBox*/
+	//productBox
 	#productBox { position:relative; width:100%; float:left;}

-	/*tab-pane*/
+	//tab-pane
 	form#product_form, form#access_form, form#cart_rule_form, #modules_tab_list { background-color:#ebedf4; border:1px solid #ccced7; min-height:404px; padding: 5px 10px 10px; margin-left:140px;}
 	#modules_tab_list {min-height: inherit}
 	#content form.adminstockmanagement {margin-left:0px;}
@@ -367,14 +364,14 @@
 	#categories-treeview { }
 	#product-tab-content-3-Associations .Association td.col-left  { width:200px;}

-	/*FILTER MODULE*/
+	//FILTER MODULE
 	.filter-module { background-color:#ebedf4; border:1px solid #c2c4d9; padding:10px; display:block; min-height:35px;}
 	.filter-module #filternameForm {float:left; margin-right:30px;}
 	.filter-module label {width:auto;}
 	.filter-module .select-filter { float:left;}
 	.filter-module .button-filter { float:right;}

-	/*FILTER STOCK*/
+	//FILTER STOCK
 	.filter-stock { background-color:#ebedf4; border:1px solid #c2c4d9; margin-bottom:15px; padding:10px; display:block; min-height:25px;}
 	.filter-stock #stock_instant_state {float:left; margin-right:30px;}
 	.filter-stock label {width:auto;}
@@ -387,7 +384,7 @@
 	.filter-stock-extended .select-filter { float:left;}
 	.filter-stock-extended .button-filter { float:right;}

-	/*ADDONS LOGIN*/
+	//ADDONS LOGIN
 	#addons_login_div { background: #EBEDF4 url('../img/lock.png') no-repeat scroll left 5px;}
 	#addons_login_div form#addons_login_form { float:right;}
 	#addons_login_div p {float:left; font-size:16px; color:#585A69; line-height:24px; text-shadow: 0 1px 0 #fff; margin:0; padding-left:25px;}
@@ -395,7 +392,7 @@
 	#addons_login_div input { float:left; margin-right:10px;}
 	#addons_login_div input#addons_login_button { margin-right: 0px; }

-	/*SIDEBAR*/
+	//SIDEBAR
 	.sidebar { position:relative; float:left; width:220px; display:inline;}
 	.sidebar h3 { background-color:#ebedf4; font-weight:bold; display:block; padding:5px;}
 	.sidebar.navigation h3 {margin:0;}
@@ -409,7 +406,7 @@
 	.sidebar ul.categorieList li div.count{ position:absolute; top:0; right:5px;}
 	.sidebar .categorieStatus { display:none;}

-	/*NAVIGATION ENGINE*/
+	//NAVIGATION ENGINE
 	.blocEngine { background-color:#eee;}
 	.blocEngine .rowForm {    display: block;float: left;margin: 0; padding: 5px 0; }
 	.blocEngine .rowForm label { font-weight:normal;}
@@ -418,7 +415,7 @@

 	.blocEngine p { margin-top:10px;display:block; float:left;}

-	/*STATCONTAINER*/
+	//STATCONTAINER
 	#statsContainer {margin-left:220px; padding:0 0 0 20px;}
 	#statsContainer #calendar,
 	#referrersContainer #calendar{   background-color: #EEEEEE;border-top: 1px solid #CCCCCC; display: block; margin: 10px 0;min-height: 25px; padding: 5px;}
@@ -499,9 +496,9 @@
 	#statsContainer .blocStats form { position:absolute; top:10px; right:5px;}
 	#statsContainer .blocStats form.checkup { position:relative; top:0; left:0;}
 	#statsContainer .totalStats { font-size:16px; font-weight:bold;}
-	#statsContainer .blocStats .blocConversion { display:block; display:inline-table; min-height:80px /*!ie;*/ }
+	#statsContainer .blocStats .blocConversion { display:block; display:inline-table; min-height:80px}

-	/*MODULECONTAINER*/
+	//MODULECONTAINER
 	#moduleContainer { margin-left:220px; padding:13px 0 0 20px;}
 	#moduleContainer .table tr th { height:40px;}
 	#moduleContainer .table tr td { font-size:12px; vertical-align:top; padding: 5px 7px 0; border-top:1px solid #ccc; border-bottom:none;}
@@ -529,7 +526,7 @@
 	#moduleContainer .moduleGridDesc h3 { color:#3A6EA7; margin:0;}
 	#moduleContainer ul.listing-grid-module li select { position:absolute; top:0; right:0px; }

-	/*TAB MODULES LIST*/
+	//TAB MODULES LIST

 	#modules_list_container_tab #modules_list_container_content{
 		list-style-type:none; 
@@ -570,20 +567,19 @@
 	.default_modules_list_display_type #modules_list_container_content li table {border:solid 1px #ccc;height:105px;width:100%;margin-bottom:10px}
 	#modules_list_container_tab ul li {height:105px}

-			/******** ie7 ******/
-			.ie7 #modules_list_container_tab #modules_list_container_content li{zoom:1;display:inline;}
-			.ie7 #modules_list_container_content li table {width: 21%;}
-			.ie7 #modules_list_container_content li table td .btn_right{width:100%;float:right;}
-			.ie7 #modules_list_container_content li table td .btn_right select{float:left;}
-			.ie7 #modules_list_container_content li table td a.button{display:block;float:right;}
+	//******* ie7 *****
+	.ie7 #modules_list_container_tab #modules_list_container_content li{zoom:1;display:inline;}
+	.ie7 #modules_list_container_content li table {width: 21%;}
+	.ie7 #modules_list_container_content li table td .btn_right{width:100%;float:right;}
+	.ie7 #modules_list_container_content li table td .btn_right select{float:left;}
+	.ie7 #modules_list_container_content li table td a.button{display:block;float:right;}

-	/*MODULE POSITION*/
+	//MODULE POSITION
 	.blocLiveEdit { float:right; clear:right;  background-color: #EBEDF4; border: 1px solid #C2C4D9;display: block;  width:250px;}
 	.blocLiveEdit h2 { background: transparent url('../img/live_edit.png') no-repeat scroll 10px 10px; height: 40px; line-height: 50px;margin: 0; padding: 0 10px; text-indent: 40px;}
 	.blocLiveEdit p { padding: 0 10px;}
 	.blocLiveEdit a.button {float: left; margin:10px; display: inline-block;}

-
 	#modulePosition { width:100%; float:left; clear:left;}
 	#modulePosition .table tr th { height:40px;}
 	#modulePosition form{ margin-right:270px;}
@@ -601,13 +597,13 @@
 	ul.listForm li {padding-bottom:3px;}


-	/*FOOTER*/
+	//FOOTER
 	#footer {height:40px; font-size:12px;clear:both;font-size:0.9em;color:#666666}
 	#footer .footerLeft { float:left; margin-left:10px;}
 	#footer .footerRight {float:right; margin-right:10px;}
 	#footer .footer_link, #footer .footer_link:hover { color:#268CCD;}

-	/*DASHBOARD*/
+	//DASHBOARD
 	.pageTitleHome { font-size: 1.6em; font-weight: normal; margin:0; padding:10px 0;}
 	.pageTitleHome h3 { font-weight: normal; margin:0;}
 	#dashboard {  background-color: #EBEDF4; border: 1px solid #C2C4D9; display: block; padding: 10px; position: relative; min-width:1200px;}
@@ -663,15 +659,16 @@
 		background: -o-linear-gradient(top, #ddd, #aaa);
 		background: -webkit-linear-gradient(top, #ddd, #aaa);
 		background: linear-gradient(top, #ddd, #aaa);
-		color: #666
+		color: #666;
 	}

-	/******** CREATE AN ORDER **************/
+	//******* CREATE AN ORDER *************

 	#carrier_form label{padding-top:0}
 	#carrier_form input{margin-top:3px}

-	/************** SCENE *****************/
+	//************* SCENE ****************
+
+	#large_scene_image { clear:both; border:1px solid transparent;}

-	#large_scene_image{clear:both;border:1px solid transparent;}			
 }
@@ -23,7 +23,7 @@ $gray-lighter:           lighten(#000, 93.5%) ; //#eee
 //$brand-primary: 		#1EAEC0 ; 	//bleu turquoise
 //$brand-primary: 		#33556E ;
 //$brand-primary: 		#7F8AAE ;
-$brand-primary: 		#173741 ;
+$brand-primary: 		#1D7878 ;


 $brand-success:         #5cb85c ;
@@ -89,7 +89,7 @@ $border-radius-base:             3px ;

 // $table-bg:                           transparent ; overall background-color
 // $table-bg-accent:                    #f9f9f9 ; for striping
-$table-bg-hover:                     lighten($secondary-color,35%) ;
+$table-bg-hover:                     $bg-panel-heading-color ;

 // $table-border-color:                 #ddd ; table and cell border

@@ -395,37 +395,37 @@ $well-bg:                     darken($bg-content-color,5%) ;
 // --------------------------------------------------

 // Tiny screen / phone
-// $screen-tiny:                480px ;
-// $screen-phone:               $screen-tiny ;
+$screen-tiny:                480px ;
+$screen-phone:               $screen-tiny ;

 // Small screen / tablet
-// $screen-small:               768px ;
-// $screen-tablet:              $screen-small ;
+$screen-small:               768px ;
+$screen-tablet:              $screen-small ;

 // Medium screen / desktop
-// $screen-medium:              992px ;
-// $screen-desktop:             $screen-medium ;
+$screen-medium:              992px ;
+$screen-desktop:             $screen-medium ;

 // So media queries don't overlap when required, provide a maximum
-// $screen-small-max:           ($screen-medium - 1) ;
-// $screen-tablet-max:          $screen-small-max ;
+$screen-small-max:           ($screen-medium - 1) ;
+$screen-tablet-max:          $screen-small-max ;

 // Large screen / wide desktop
-// $screen-large:               1200px ;
-// $screen-large-desktop:       $screen-large ;
+$screen-large:               1200px ;
+$screen-large-desktop:       $screen-large ;


 // Container sizes
 // --------------------------------------------------

 // Small screen / tablet
-// $container-tablet:          728px ;
+$container-tablet:          728px ;

 // Medium screen / desktop
-// $container-desktop:         940px ;
+$container-desktop:         940px ;

 // Large screen / wide desktop
-// $container-large-desktop:   1170px ;
+$container-large-desktop:   1170px ;


 // Grid system
@@ -1,6 +1,13 @@
+/**
+* bootstrap.js v3.0.0 by @fat and @mdo
+* Copyright 2013 Twitter Inc.
+* http://www.apache.org/licenses/LICENSE-2.0
+*/
+if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
+
 /* ========================================================================
 * Bootstrap: transition.js v3.0.0
- * http://twitter.github.com/bootstrap/javascript.html#transitions
+ * http://twbs.github.com/bootstrap/javascript.html#transitions
 * ========================================================================
 * Copyright 2013 Twitter, Inc.
 *
@@ -40,14 +47,24 @@
    }
  }

+  // http://blog.alexmaccaw.com/css-transitions
+  $.fn.emulateTransitionEnd = function (duration) {
+    var called = false, $el = this
+    $(this).one($.support.transition.end, function () { called = true })
+    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
+    setTimeout(callback, duration)
+    return this
+  }
+
  $(function () {
    $.support.transition = transitionEnd()
  })

 }(window.jQuery);
+
 /* ========================================================================
 * Bootstrap: alert.js v3.0.0
- * http://twitter.github.com/bootstrap/javascript.html#alerts
+ * http://twbs.github.com/bootstrap/javascript.html#alerts
 * ========================================================================
 * Copyright 2013 Twitter, Inc.
 *
@@ -103,7 +120,9 @@
    }

    $.support.transition && $parent.hasClass('fade') ?
-      $parent.on($.support.transition.end, removeElement) :
+      $parent
+        .one($.support.transition.end, removeElement)
+        .emulateTransitionEnd(150) :
      removeElement()
  }

@@ -141,9 +160,10 @@
  $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)

 }(window.jQuery);
+
 /* ========================================================================
 * Bootstrap: button.js v3.0.0
- * http://twitter.github.com/bootstrap/javascript.html#buttons
+ * http://twbs.github.com/bootstrap/javascript.html#buttons
 * ========================================================================
 * Copyright 2013 Twitter, Inc.
 *
@@ -196,10 +216,13 @@
  }

  Button.prototype.toggle = function () {
-    var $parent = this.$element.closest('[data-toggle="buttons-radio"]')
+    var $parent = this.$element.closest('[data-toggle="buttons"]')

-    if ($parent) {
-      $parent.find('.active').removeClass('active')
+    if ($parent.length) {
+      var $input = this.$element.find('input')
+        .prop('checked', !this.$element.hasClass('active'))
+        .trigger('change')
+      if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
    }

    this.$element.toggleClass('active')
@@ -214,7 +237,7 @@
  $.fn.button = function (option) {
    return this.each(function () {
      var $this   = $(this)
-      var data    = $this.data('button')
+      var data    = $this.data('bs.button')
      var options = typeof option == 'object' && option

      if (!data) $this.data('bs.button', (data = new Button(this, options)))
@@ -243,12 +266,14 @@
    var $btn = $(e.target)
    if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
    $btn.button('toggle')
+    e.preventDefault()
  })

 }(window.jQuery);
+
 /* ========================================================================
 * Bootstrap: carousel.js v3.0.0
- * http://twitter.github.com/bootstrap/javascript.html#carousel
+ * http://twbs.github.com/bootstrap/javascript.html#carousel
 * ========================================================================
 * Copyright 2012 Twitter, Inc.
 *
@@ -289,6 +314,7 @@
  Carousel.DEFAULTS = {
    interval: 5000
  , pause: 'hover'
+  , wrap: true
  }

  Carousel.prototype.cycle =  function (e) {
@@ -353,12 +379,15 @@
    var fallback  = type == 'next' ? 'first' : 'last'
    var that      = this

+    if (!$next.length) {
+      if (!this.options.wrap) return
+      $next = this.$element.find('.item')[fallback]()
+    }
+
    this.sliding = true

    isCycling && this.pause()

-    $next = $next.length ? $next : this.$element.find('.item')[fallback]()
-
    var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction })

    if ($next.hasClass('active')) return
@@ -378,12 +407,14 @@
      $next[0].offsetWidth // force reflow
      $active.addClass(direction)
      $next.addClass(direction)
-      this.$element.one($.support.transition.end, function () {
-        $next.removeClass([type, direction].join(' ')).addClass('active')
-        $active.removeClass(['active', direction].join(' '))
-        that.sliding = false
-        setTimeout(function () { that.$element.trigger('slid') }, 0)
-      })
+      $active
+        .one($.support.transition.end, function () {
+          $next.removeClass([type, direction].join(' ')).addClass('active')
+          $active.removeClass(['active', direction].join(' '))
+          that.sliding = false
+          setTimeout(function () { that.$element.trigger('slid') }, 0)
+        })
+        .emulateTransitionEnd(600)
    } else {
      this.$element.trigger(e)
      if (e.isDefaultPrevented()) return
@@ -408,7 +439,7 @@
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.carousel')
-      var options = $.extend({}, Carousel.DEFAULTS, typeof option == 'object' && option)
+      var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
      var action  = typeof option == 'string' ? option : options.slide

      if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
@@ -437,12 +468,13 @@
    var $this   = $(this), href
    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
    var options = $.extend({}, $target.data(), $this.data())
-    var slideIndex
+    var slideIndex = $this.attr('data-slide-to')
+    if (slideIndex) options.interval = false

    $target.carousel(options)

    if (slideIndex = $this.attr('data-slide-to')) {
-      $target.data('bs.carousel').pause().to(slideIndex).cycle()
+      $target.data('bs.carousel').to(slideIndex)
    }

    e.preventDefault()
@@ -456,9 +488,10 @@
  })

 }(window.jQuery);
+
 /* ========================================================================
 * Bootstrap: collapse.js v3.0.0
- * http://twitter.github.com/bootstrap/javascript.html#collapse
+ * http://twbs.github.com/bootstrap/javascript.html#collapse
 * ========================================================================
 * Copyright 2012 Twitter, Inc.
 *
@@ -502,63 +535,81 @@
  Collapse.prototype.show = function () {
    if (this.transitioning || this.$element.hasClass('in')) return

-    var dimension = this.dimension()
-    var scroll    = $.camelCase(['scroll', dimension].join('-'))
-    var actives   = this.$parent && this.$parent.find('> .accordion-group > .in')
+    var startEvent = $.Event('show.bs.collapse')
+    this.$element.trigger(startEvent)
+    if (startEvent.isDefaultPrevented()) return
+
+    var actives = this.$parent && this.$parent.find('> .panel > .in')

    if (actives && actives.length) {
-      var hasData = actives.data('collapse')
+      var hasData = actives.data('bs.collapse')
      if (hasData && hasData.transitioning) return
      actives.collapse('hide')
-      hasData || actives.data('collapse', null)
+      hasData || actives.data('bs.collapse', null)
    }

-    this.$element[dimension](0)
-    this.transition('addClass', $.Event('show.bs.collapse'), 'shown.bs.collapse')
-
-    if ($.support.transition) this.$element[dimension](this.$element[0][scroll])
-  }
-
-  Collapse.prototype.hide = function () {
-    if (this.transitioning || !this.$element.hasClass('in')) return
-    var dimension = this.dimension()
-    this.reset(this.$element[dimension]())
-    this.transition('removeClass', $.Event('hide.bs.collapse'), 'hidden')
-    this.$element[dimension](0)
-  }
-
-  Collapse.prototype.reset = function (size) {
    var dimension = this.dimension()

    this.$element
      .removeClass('collapse')
-      [dimension](size || 'auto')
-      [0].offsetWidth
-
-    this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')
-
-    return this
-  }
-
-  Collapse.prototype.transition = function (method, startEvent, completeEvent) {
-    var that     = this
-    var complete = function () {
-      if (startEvent.type == 'show') that.reset()
-      that.transitioning = 0
-      that.$element.trigger(completeEvent)
-    }
-
-    this.$element.trigger(startEvent)
-
-    if (startEvent.isDefaultPrevented()) return
+      .addClass('collapsing')
+      [dimension](0)

    this.transitioning = 1

-    this.$element[method]('in')
+    var complete = function () {
+      this.$element
+        .removeClass('collapsing')
+        .addClass('in')
+        [dimension]('auto')
+      this.transitioning = 0
+      this.$element.trigger('shown.bs.collapse')
+    }

-    $.support.transition && this.$element.hasClass('collapse') ?
-      this.$element.one($.support.transition.end, complete) :
-      complete()
+    if (!$.support.transition) return complete.call(this)
+
+    var scrollSize = $.camelCase(['scroll', dimension].join('-'))
+
+    this.$element
+      .one($.support.transition.end, $.proxy(complete, this))
+      .emulateTransitionEnd(350)
+      [dimension](this.$element[0][scrollSize])
+  }
+
+  Collapse.prototype.hide = function () {
+    if (this.transitioning || !this.$element.hasClass('in')) return
+
+    var startEvent = $.Event('hide.bs.collapse')
+    this.$element.trigger(startEvent)
+    if (startEvent.isDefaultPrevented()) return
+
+    var dimension = this.dimension()
+
+    this.$element
+      [dimension](this.$element[dimension]())
+      [0].offsetHeight
+
+    this.$element
+      .addClass('collapsing')
+      .removeClass('collapse')
+      .removeClass('in')
+
+    this.transitioning = 1
+
+    var complete = function () {
+      this.transitioning = 0
+      this.$element
+        .trigger('hidden.bs.collapse')
+        .removeClass('collapsing')
+        .addClass('collapse')
+    }
+
+    if (!$.support.transition) return complete.call(this)
+
+    this.$element
+      [dimension](0)
+      .one($.support.transition.end, $.proxy(complete, this))
+      .emulateTransitionEnd(350)
  }

  Collapse.prototype.toggle = function () {
@@ -574,10 +625,10 @@
  $.fn.collapse = function (option) {
    return this.each(function () {
      var $this   = $(this)
-      var data    = $this.data('collapse')
+      var data    = $this.data('bs.collapse')
      var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)

-      if (!data) $this.data('collapse', (data = new Collapse(this, options)))
+      if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }
@@ -598,20 +649,29 @@
  // =================

  $(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
-    var $this  = $(this), href
-    var target = $this.attr('data-target')
+    var $this   = $(this), href
+    var target  = $this.attr('data-target')
        || e.preventDefault()
        || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
-    var option = $(target).data('collapse') ? 'toggle' : $this.data()
+    var $target = $(target)
+    var data    = $target.data('bs.collapse')
+    var option  = data ? 'toggle' : $this.data()
+    var parent  = $this.attr('data-parent')
+    var $parent = parent && $(parent)

-    $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
-    $(target).collapse(option)
+    if (!data || !data.transitioning) {
+      if ($parent) $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed')
+      $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
+    }
+
+    $target.collapse(option)
  })

 }(window.jQuery);
+
 /* ========================================================================
 * Bootstrap: dropdown.js v3.0.0
- * http://twitter.github.com/bootstrap/javascript.html#dropdowns
+ * http://twbs.github.com/bootstrap/javascript.html#dropdowns
 * ========================================================================
 * Copyright 2012 Twitter, Inc.
 *
@@ -651,9 +711,9 @@
    clearMenus()

    if (!isActive) {
-      if ('ontouchstart' in document.documentElement) {
+      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we we use a backdrop because click events don't delegate
-        $('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus)
+        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
      }

      $parent.trigger(e = $.Event('show.bs.dropdown'))
@@ -663,9 +723,9 @@
      $parent
        .toggleClass('open')
        .trigger('shown.bs.dropdown')
-    }

-    $this.focus()
+      $this.focus()
+    }

    return false
  }
@@ -703,7 +763,7 @@

  function clearMenus() {
    $(backdrop).remove()
-    $(toggle).each(function (e) { 
+    $(toggle).each(function (e) {
      var $parent = getParent($(this))
      if (!$parent.hasClass('open')) return
      $parent.trigger(e = $.Event('hide.bs.dropdown'))
@@ -756,7 +816,6 @@
  // APPLY TO STANDARD DROPDOWN ELEMENTS
  // ===================================

-
  $(document)
    .on('click.bs.dropdown.data-api', clearMenus)
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
@@ -764,9 +823,10 @@
    .on('keydown.bs.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

 }(window.jQuery);
+
 /* ========================================================================
 * Bootstrap: modal.js v3.0.0
- * http://twitter.github.com/bootstrap/javascript.html#modals
+ * http://twbs.github.com/bootstrap/javascript.html#modals
 * ========================================================================
 * Copyright 2012 Twitter, Inc.
 *
@@ -791,11 +851,11 @@

  var Modal = function (element, options) {
    this.options   = options
-    this.$element  = $(element).delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
+    this.$element  = $(element)
    this.$backdrop =
    this.isShown   = null

-    if (this.options.remote) this.$element.find('.modal-body').load(this.options.remote)
+    if (this.options.remote) this.$element.load(this.options.remote)
  }

  Modal.DEFAULTS = {
@@ -804,13 +864,13 @@
    , show: true
  }

-  Modal.prototype.toggle = function () {
-    return this[!this.isShown ? 'show' : 'hide']()
+  Modal.prototype.toggle = function (_relatedTarget) {
+    return this[!this.isShown ? 'show' : 'hide'](_relatedTarget)
  }

-  Modal.prototype.show = function () {
+  Modal.prototype.show = function (_relatedTarget) {
    var that = this
-    var e    = $.Event('show.bs.modal')
+    var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })

    this.$element.trigger(e)

@@ -820,6 +880,8 @@

    this.escape()

+    this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
+
    this.backdrop(function () {
      var transition = $.support.transition && that.$element.hasClass('fade')

@@ -839,9 +901,15 @@

      that.enforceFocus()

+      var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
+
      transition ?
-        that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown.bs.modal') }) :
-        that.$element.focus().trigger('shown.bs.modal')
+        that.$element.find('.modal-dialog') // wait for modal to slide in
+          .one($.support.transition.end, function () {
+            that.$element.focus().trigger(e)
+          })
+          .emulateTransitionEnd(300) :
+        that.$element.focus().trigger(e)
    })
  }

@@ -863,9 +931,12 @@
    this.$element
      .removeClass('in')
      .attr('aria-hidden', true)
+      .off('click.dismiss.modal')

    $.support.transition && this.$element.hasClass('fade') ?
-      this.hideWithTransition() :
+      this.$element
+        .one($.support.transition.end, $.proxy(this.hideModal, this))
+        .emulateTransitionEnd(300) :
      this.hideModal()
  }

@@ -889,19 +960,6 @@
    }
  }

-  Modal.prototype.hideWithTransition = function () {
-    var that    = this
-    var timeout = setTimeout(function () {
-      that.$element.off($.support.transition.end)
-      that.hideModal()
-    }, 500)
-
-    this.$element.one($.support.transition.end, function () {
-      clearTimeout(timeout)
-      that.hideModal()
-    })
-  }
-
  Modal.prototype.hideModal = function () {
    var that = this
    this.$element.hide()
@@ -926,11 +984,12 @@
      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
        .appendTo(document.body)

-      this.$backdrop.click(
-        this.options.backdrop == 'static' ?
-          $.proxy(this.$element[0].focus, this.$element[0])
-        : $.proxy(this.hide, this)
-      )
+      this.$element.on('click.dismiss.modal', $.proxy(function (e) {
+        if (e.target !== e.currentTarget) return
+        this.options.backdrop == 'static'
+          ? this.$element[0].focus.call(this.$element[0])
+          : this.hide.call(this)
+      }, this))

      if (doAnimate) this.$backdrop[0].offsetWidth // force reflow

@@ -939,14 +998,18 @@
      if (!callback) return

      doAnimate ?
-        this.$backdrop.one($.support.transition.end, callback) :
+        this.$backdrop
+          .one($.support.transition.end, callback)
+          .emulateTransitionEnd(150) :
        callback()

    } else if (!this.isShown && this.$backdrop) {
      this.$backdrop.removeClass('in')

      $.support.transition && this.$element.hasClass('fade')?
-        this.$backdrop.one($.support.transition.end, callback) :
+        this.$backdrop
+          .one($.support.transition.end, callback)
+          .emulateTransitionEnd(150) :
        callback()

    } else if (callback) {
@@ -960,15 +1023,15 @@

  var old = $.fn.modal

-  $.fn.modal = function (option) {
+  $.fn.modal = function (option, _relatedTarget) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.modal')
      var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)

      if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
-      if (typeof option == 'string') data[option]()
-      else if (options.show) data.show()
+      if (typeof option == 'string') data[option](_relatedTarget)
+      else if (options.show) data.show(_relatedTarget)
    })
  }

@@ -991,25 +1054,26 @@
    var $this   = $(this)
    var href    = $this.attr('href')
    var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
-    var option  = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())
+    var option  = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())

    e.preventDefault()

    $target
-      .modal(option)
+      .modal(option, this)
      .one('hide', function () {
-        $this.focus()
+        $this.is(':visible') && $this.focus()
      })
-    })
+  })

-    var $body = $(document.body)
-      .on('bs.modal.shown',  '.modal', function () { $body.addClass('modal-open') })
-      .on('bs.modal.hidden', '.modal', function () { $body.removeClass('modal-open') })
+  $(document)
+    .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
+    .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })

 }(window.jQuery);
+
 /* ========================================================================
 * Bootstrap: tooltip.js v3.0.0
- * http://twitter.github.com/bootstrap/javascript.html#affix
+ * http://twbs.github.com/bootstrap/javascript.html#tooltip
 * Inspired by the original jQuery.tipsy by Jason Frame
 * ========================================================================
 * Copyright 2012 Twitter, Inc.
@@ -1073,7 +1137,7 @@
        var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focus'
        var eventOut = trigger == 'hover' ? 'mouseleave' : 'blur'

-        this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
+        this.$element.on(eventIn  + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
        this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
      }
    }
@@ -1100,37 +1164,43 @@
    return options
  }

-  Tooltip.prototype.enter = function (obj) {
-    var defaults = this.getDefaults()
+  Tooltip.prototype.getDelegateOptions = function () {
    var options  = {}
+    var defaults = this.getDefaults()

    this._options && $.each(this._options, function (key, value) {
      if (defaults[key] != value) options[key] = value
    })

+    return options
+  }
+
+  Tooltip.prototype.enter = function (obj) {
    var self = obj instanceof this.constructor ?
-      obj : $(obj.currentTarget)[this.type](options).data('bs.' + this.type)
+      obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
+
+    clearTimeout(self.timeout)
+
+    self.hoverState = 'in'

    if (!self.options.delay || !self.options.delay.show) return self.show()

-    clearTimeout(this.timeout)
-
-    self.hoverState = 'in'
-    this.timeout    = setTimeout(function () {
+    self.timeout = setTimeout(function () {
      if (self.hoverState == 'in') self.show()
    }, self.options.delay.show)
  }

  Tooltip.prototype.leave = function (obj) {
    var self = obj instanceof this.constructor ?
-      obj : $(obj.currentTarget)[this.type](this._options).data('bs.' + this.type)
+      obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)

-    clearTimeout(this.timeout)
+    clearTimeout(self.timeout)
+
+    self.hoverState = 'out'

    if (!self.options.delay || !self.options.delay.hide) return self.hide()

-    self.hoverState = 'out'
-    this.timeout    = setTimeout(function () {
+    self.timeout = setTimeout(function () {
      if (self.hoverState == 'out') self.hide()
    }, self.options.delay.hide)
  }
@@ -1153,33 +1223,44 @@
        this.options.placement.call(this, $tip[0], this.$element[0]) :
        this.options.placement

+      var autoToken = /\s?auto?\s?/i
+      var autoPlace = autoToken.test(placement)
+      if (autoPlace) placement = placement.replace(autoToken, '') || 'top'
+
      $tip
        .detach()
        .css({ top: 0, left: 0, display: 'block' })
+        .addClass(placement)

      this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)

-      var tp
      var pos          = this.getPosition()
      var actualWidth  = $tip[0].offsetWidth
      var actualHeight = $tip[0].offsetHeight

-      switch (placement) {
-        case 'bottom':
-          tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
-          break
-        case 'top':
-          tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
-          break
-        case 'left':
-          tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}
-          break
-        case 'right':
-          tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
-          break
+      if (autoPlace) {
+        var $parent = this.$element.parent()
+
+        var orgPlacement = placement
+        var docScroll    = document.documentElement.scrollTop || document.body.scrollTop
+        var parentWidth  = this.options.container == 'body' ? window.innerWidth  : $parent.outerWidth()
+        var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight()
+        var parentLeft   = this.options.container == 'body' ? 0 : $parent.offset().left
+
+        placement = placement == 'bottom' && pos.top   + pos.height  + actualHeight - docScroll > parentHeight  ? 'top'    :
+                    placement == 'top'    && pos.top   - docScroll   - actualHeight < 0                         ? 'bottom' :
+                    placement == 'right'  && pos.right + actualWidth > parentWidth                              ? 'left'   :
+                    placement == 'left'   && pos.left  - actualWidth < parentLeft                               ? 'right'  :
+                    placement
+
+        $tip
+          .removeClass(orgPlacement)
+          .addClass(placement)
      }

-      this.applyPlacement(tp, placement)
+      var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
+
+      this.applyPlacement(calculatedOffset, placement)
      this.$element.trigger('shown.bs.' + this.type)
    }
  }
@@ -1190,23 +1271,34 @@
    var width  = $tip[0].offsetWidth
    var height = $tip[0].offsetHeight

+    // manually read margins because getBoundingClientRect includes difference
+    var marginTop = parseInt($tip.css('margin-top'), 10)
+    var marginLeft = parseInt($tip.css('margin-left'), 10)
+
+    // we must check for NaN for ie 8/9
+    if (isNaN(marginTop))  marginTop  = 0
+    if (isNaN(marginLeft)) marginLeft = 0
+
+    offset.top  = offset.top  + marginTop
+    offset.left = offset.left + marginLeft
+
    $tip
      .offset(offset)
-      .addClass(placement)
      .addClass('in')

+    // check to see if placing tip in new offset caused the tip to resize itself
    var actualWidth  = $tip[0].offsetWidth
    var actualHeight = $tip[0].offsetHeight

    if (placement == 'top' && actualHeight != height) {
      replace = true
-      offset.top  = offset.top + height - actualHeight
+      offset.top = offset.top + height - actualHeight
    }

-    if (placement == 'bottom' || placement == 'top') {
+    if (/bottom|top/.test(placement)) {
      var delta = 0

-      if (offset.left < 0){
+      if (offset.left < 0) {
        delta       = offset.left * -2
        offset.left = 0

@@ -1241,26 +1333,21 @@
    var $tip = this.tip()
    var e    = $.Event('hide.bs.' + this.type)

+    function complete() {
+      if (that.hoverState != 'in') $tip.detach()
+    }
+
    this.$element.trigger(e)

    if (e.isDefaultPrevented()) return

    $tip.removeClass('in')

-    function removeWithAnimation() {
-      var timeout = setTimeout(function () {
-        $tip.off($.support.transition.end).detach()
-      }, 500)
-
-      $tip.one($.support.transition.end, function () {
-        clearTimeout(timeout)
-        $tip.detach()
-      })
-    }
-
    $.support.transition && this.$tip.hasClass('fade') ?
-      removeWithAnimation() :
-      $tip.detach()
+      $tip
+        .one($.support.transition.end, complete)
+        .emulateTransitionEnd(150) :
+      complete()

    this.$element.trigger('hidden.bs.' + this.type)

@@ -1286,6 +1373,13 @@
    }, this.$element.offset())
  }

+  Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
+    return placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2  } :
+           placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2  } :
+           placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
+        /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width   }
+  }
+
  Tooltip.prototype.getTitle = function () {
    var title
    var $e = this.$element
@@ -1301,8 +1395,8 @@
    return this.$tip = this.$tip || $(this.options.template)
  }

-  Tooltip.prototype.arrow =function(){
-    return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")
+  Tooltip.prototype.arrow = function () {
+    return this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow')
  }

  Tooltip.prototype.validate = function () {
@@ -1326,7 +1420,7 @@
  }

  Tooltip.prototype.toggle = function (e) {
-    var self = e ? $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) : this
+    var self = e ? $(e.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) : this
    self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
  }

@@ -1363,9 +1457,10 @@
  }

 }(window.jQuery);
+
 /* ========================================================================
 * Bootstrap: popover.js v3.0.0
- * http://twitter.github.com/bootstrap/javascript.html#popovers
+ * http://twbs.github.com/bootstrap/javascript.html#popovers
 * ========================================================================
 * Copyright 2012 Twitter, Inc.
 *
@@ -1392,6 +1487,8 @@
    this.init('popover', element, options)
  }

+  if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
+
  Popover.DEFAULTS = $.extend({} , $.fn.tooltip.Constructor.DEFAULTS, {
    placement: 'right'
  , trigger: 'click'
@@ -1421,7 +1518,9 @@

    $tip.removeClass('fade top bottom left right in')

-    $tip.find('.popover-title:empty').hide()
+    // IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
+    // this manually by checking the contents.
+    if (!$tip.find('.popover-title').html()) $tip.find('.popover-title').hide()
  }

  Popover.prototype.hasContent = function () {
@@ -1429,11 +1528,17 @@
  }

  Popover.prototype.getContent = function () {
-    var content = typeof this.options.content == 'function' ?
-      this.options.content.call(this.$element[0]) :
-      this.options.content
+    var $e = this.$element
+    var o  = this.options

-    return content || this.$element.attr('data-content')
+    return $e.attr('data-content')
+      || (typeof o.content == 'function' ?
+            o.content.call($e[0]) :
+            o.content)
+  }
+
+  Popover.prototype.arrow = function () {
+    return this.$arrow = this.$arrow || this.tip().find('.arrow')
  }

  Popover.prototype.tip = function () {
@@ -1441,10 +1546,6 @@
    return this.$tip
  }

-  Popover.prototype.destroy = function () {
-    this.hide().$element.off('.' + this.type).removeData(this.type)
-  }
-

  // POPOVER PLUGIN DEFINITION
  // =========================
@@ -1474,9 +1575,10 @@
  }

 }(window.jQuery);
+
 /* ========================================================================
 * Bootstrap: scrollspy.js v3.0.0
- * http://twitter.github.com/bootstrap/javascript.html#scrollspy
+ * http://twbs.github.com/bootstrap/javascript.html#scrollspy
 * ========================================================================
 * Copyright 2012 Twitter, Inc.
 *
@@ -1502,10 +1604,10 @@
  function ScrollSpy(element, options) {
    var href
    var process  = $.proxy(this.process, this)
-    var $element = $(element).is('body') ? $(window) : $(element)

+    this.$element       = $(element).is('body') ? $(window) : $(element)
    this.$body          = $('body')
-    this.$scrollElement = $element.on('scroll.bs.scroll-spy.data-api', process)
+    this.$scrollElement = this.$element.on('scroll.bs.scroll-spy.data-api', process)
    this.options        = $.extend({}, ScrollSpy.DEFAULTS, options)
    this.selector       = (this.options.target
      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
@@ -1523,6 +1625,8 @@
  }

  ScrollSpy.prototype.refresh = function () {
+    var offsetMethod = this.$element[0] == window ? 'offset' : 'position'
+
    this.offsets = $([])
    this.targets = $([])

@@ -1536,7 +1640,7 @@

        return ($href
          && $href.length
-          && [[ $href.position().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]]) || null
+          && [[ $href[offsetMethod]().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]]) || null
      })
      .sort(function (a, b) { return a[0] - b[0] })
      .each(function () {
@@ -1630,9 +1734,10 @@
  })

 }(window.jQuery);
+
 /* ========================================================================
 * Bootstrap: tab.js v3.0.0
- * http://twitter.github.com/bootstrap/javascript.html#tabs
+ * http://twbs.github.com/bootstrap/javascript.html#tabs
 * ========================================================================
 * Copyright 2012 Twitter, Inc.
 *
@@ -1720,7 +1825,9 @@
    }

    transition ?
-      $active.one($.support.transition.end, next) :
+      $active
+        .one($.support.transition.end, next)
+        .emulateTransitionEnd(150) :
      next()

    $active.removeClass('in')
@@ -1763,9 +1870,10 @@
  })

 }(window.jQuery);
+
 /* ========================================================================
 * Bootstrap: affix.js v3.0.0
- * http://twitter.github.com/bootstrap/javascript.html#affix
+ * http://twbs.github.com/bootstrap/javascript.html#affix
 * ========================================================================
 * Copyright 2012 Twitter, Inc.
 *
@@ -1801,6 +1909,8 @@
    this.checkPosition()
  }

+  Affix.RESET = 'affix affix-top affix-bottom'
+
  Affix.DEFAULTS = {
    offset: 0
  }
@@ -1818,7 +1928,6 @@
    var offset       = this.options.offset
    var offsetTop    = offset.top
    var offsetBottom = offset.bottom
-    var reset        = 'affix affix-top affix-bottom'

    if (typeof offset != 'object')         offsetBottom = offsetTop = offset
    if (typeof offsetTop == 'function')    offsetTop    = offset.top()
@@ -1829,11 +1938,16 @@
                offsetTop    != null && (scrollTop <= offsetTop) ? 'top' : false

    if (this.affixed === affix) return
+    if (this.unpin) this.$element.css('top', '')

    this.affixed = affix
    this.unpin   = affix == 'bottom' ? position.top - scrollTop : null

-    this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : ''))
+    this.$element.removeClass(Affix.RESET).addClass('affix' + (affix ? '-' + affix : ''))
+
+    if (affix == 'bottom') {
+      this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })
+    }
  }


@@ -2,11 +2,11 @@
 	<div class="row">
 		<div class="col-lg-12">
 			<div class="btn-group pull-right">
-				<a class="btn btn-default btn-small{if !isset($smarty.get.select)} active{/if}" href="index.php?controller={$smarty.get.controller|htmlentities}&token={$smarty.get.token|htmlentities}">
+				<a class="btn btn-default {if !isset($smarty.get.select)} active{/if}" href="index.php?controller={$smarty.get.controller|htmlentities}&token={$smarty.get.token|htmlentities}">
 					<i class="icon-list"></i>
 					{l s='Normal view'} 
 				</a>
-				<a class="btn btn-default btn-small{if $smarty.get.select == 'favorites'} active{/if}" href="index.php?controller={$smarty.get.controller|htmlentities}&token={$smarty.get.token|htmlentities}&select=favorites">
+				<a class="btn btn-default {if $smarty.get.select == 'favorites'} active{/if}" href="index.php?controller={$smarty.get.controller|htmlentities}&token={$smarty.get.token|htmlentities}&select=favorites">
 					<i class="icon-star"></i> 
 					{l s='Favorites view'}
 				</a>
@@ -32,11 +32,11 @@
 				</th>
 				<th colspan="3">
 					<div class="btn-group pull-right">
-						<a class="btn btn-default btn-small{if !isset($smarty.get.select)} active{/if}" href="index.php?controller={$smarty.get.controller|htmlentities}&token={$smarty.get.token|htmlentities}">
+						<a class="btn btn-default {if !isset($smarty.get.select)} active{/if}" href="index.php?controller={$smarty.get.controller|htmlentities}&token={$smarty.get.token|htmlentities}">
 							<i class="icon-list"></i>
 							{l s='Normal view'} 
 						</a>
-						<a class="btn btn-default btn-small{if $smarty.get.select == 'favorites'} active{/if}" href="index.php?controller={$smarty.get.controller|htmlentities}&token={$smarty.get.token|htmlentities}&select=favorites">
+						<a class="btn btn-default {if $smarty.get.select == 'favorites'} active{/if}" href="index.php?controller={$smarty.get.controller|htmlentities}&token={$smarty.get.token|htmlentities}&select=favorites">
 							<i class="icon-star"></i> 
 							{l s='Favorites view'}
 						</a>
@@ -24,7 +24,7 @@
 *}

 {if $add_permission eq '1'}
-<div class="panel">
+	<div class="panel">
 	{if isset($logged_on_addons)}
 			<!--start addons login-->
 			<div class="panel-heading">
@@ -57,14 +57,14 @@
 					<label class="control-label col-lg-3">{l s='Addons Login'} :</label> 
 					<div class="input-group col-lg-4">
 						<span class="input-group-addon"><i class="icon-user"></i></span>
-						<input type="text" value="" id="username_addons" autocomplete="off" class="ac_input">
+						<input type="text" value="" id="username_addons" autocomplete="off" class="form-control ac_input">
 					</div>
 				</div>
 				<div class="row">
 					<label class="control-label col-lg-3">{l s= 'Password Addons'} :</label>
 					<div class="input-group col-lg-4">
 						<span class="input-group-addon"><i class="icon-key"></i></span>
-						<input type="password" value="" id="password_addons" autocomplete="off" class="ac_input">
+						<input type="password" value="" id="password_addons" autocomplete="off" class="form-control ac_input">
 					</div>
 				</div>
 				<div class="row">
@@ -39,8 +39,6 @@
 		</ul>
 	</div>
 	{/if}
-
-	
 		<div class="panel">
 			<div class="panel-heading">
 				<i class="icon-list-ul"></i>
@@ -49,7 +47,6 @@
 			{include file='controllers/modules/filters.tpl'}
 			<!--start sidebar module-->
 			<div class="row">
-
 				<div class="categorieTitle col col-lg-3">
 					<div class="list-group">

@@ -149,8 +149,8 @@
 												</td>
 												<td>
 													<div class="btn-group btn-group-action">
-														<span class="btn btn-default btn-small">{l s='Choose an action'}</span>
-														<button class="btn btn-default btn-small dropdown-toggle" data-toggle="dropdown">
+														<span class="btn btn-default">{l s='Choose an action'}</span>
+														<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 															<span class="caret"></span>&nbsp;
 														</button>
 														<ul class="dropdown-menu">
@@ -199,7 +199,7 @@
 				<p>{l s='You have to select a shop to use LiveEdit'}</p>
 			{else}
 				<p>{l s='Click here to be redirected to the Front Office of your shop where you can move and delete modules directly.'}</p>
-					<a class="btn btn-default btn-small pull-right" href="{$url_live_edit}" target="_blank">
+					<a class="btn btn-default pull-right" href="{$url_live_edit}" target="_blank">
 						<i class="icon-edit"></i>
 						{l s='Run LiveEdit'}
 					</a>
@@ -569,7 +569,7 @@
 						stock[id_product] = new Array();
 						if (this.customizable == '1')
 						{
-							customization_html += '<fieldset class="width3"><legend>{l s='Customization'}</legend><form id="customization_'+id_product+'" class="id_customization" method="post" enctype="multipart/form-data" action="'+admin_cart_link+'" style="display:none;">';
+							customization_html += '<fieldset class="width3"><h3>{l s='Customization'}</h3><form id="customization_'+id_product+'" class="id_customization" method="post" enctype="multipart/form-data" action="'+admin_cart_link+'" style="display:none;">';
 							customization_html += '<input type="hidden" name="id_product" value="'+id_product+'" />';
 							customization_html += '<input type="hidden" name="id_cart" value="'+id_cart+'" />';
 							customization_html += '<input type="hidden" name="action" value="updateCustomizationFields" />';
@@ -983,10 +983,10 @@

 <form action="" method="" class="form-horizontal">
 	<fieldset id="customer_part">
-		<legend>
+		<h3>
 			<i class="icon-user"></i>
 			{l s='Customer'}
-		</legend>
+		</h3>
 		<div class="row">
 			<div class="col-lg-12">
 				<a class="fancybox btn btn-default" href="{$link->getAdminLink('AdminCustomers')|escape:'htmlall':'UTF-8'}&addcustomer&liteDisplaying=1&submitFormAjax=1#">
@@ -1010,10 +1010,10 @@
 </form>
 <form class="form-horizontal" action="{$link->getAdminLink('AdminOrders')|escape:'htmlall':'UTF-8'}&submitAdd{$table}=1" method="post" autocomplete="off">
 	<fieldset id="products_part" style="display:none;">
-		<legend>
+		<h3>
 			<i class="icon-folder-close"></i>
 			{l s='Cart'}
-		</legend>
+		</h3>
 		<div class="row">
 			<label class="control-label col-lg-3">
 				<span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="{l s='Search a product by tapping the first letters of his/her name.'}">
@@ -1189,10 +1189,10 @@
 		</div>
 	</fieldset>
 	<fieldset id="vouchers_part" style="display:none;">
-		<legend>
+		<h3>
 			<i class="icon-table"></i>
 			{l s='Vouchers'}
-		</legend>
+		</h3>
 		<div class="row">
 			<div class="col-lg-12">
 				<a class="fancybox btn btn-default" href="{$link->getAdminLink('AdminCartRules')|escape:'htmlall':'UTF-8'}&addcart_rule&liteDisplaying=1&submitFormAjax=1#">
@@ -1225,10 +1225,10 @@
 		<div id="vouchers_err" class="alert alert-block" style="display:none;"></div>
 	</fieldset>
 	<fieldset id="address_part" style="display:none;">
-		<legend>
+		<h3>
 			<i class="icon-envelope"></i>
 			{l s='Addresses'}
-		</legend>
+		</h3>
 		<div id="addresses_err" class="alert alert-block" style="display:none;"></div>

 		<div class="row">
@@ -1261,10 +1261,10 @@
 		</div>
 	</fieldset>
 	<fieldset id="carriers_part" style="display:none;">
-		<legend>
+		<h3>
 			<i class="icon-truck"></i>
 			{l s='Shipping'}
-		</legend>
+		</h3>
 		<div id="carriers_err" style="display:none;" class="alert alert-block"></div>
 		<div id="carrier_form">
 			<div class="row">
@@ -1304,10 +1304,10 @@
 		</div>
 	</fieldset>
 	<fieldset id="summary_part" style="display:none;">
-		<legend>
+		<h3>
 			<i class="icon-align-justify"></i>
 			{l s='Summary'}
-		</legend>
+		</h3>
 		<div class="row">
 			<div id="send_email_feedback" class="col-lg-12"></div>
 		</div>
@@ -27,12 +27,12 @@
 </div>
 {if $display_footer}
 {hook h="displayBackOfficeFooter"}
-	<div id="footer">
-		<div class="col-lg-4">
+	<div id="footer" class="affix" data-offset-bottom="0">
+		<div class="col-lg-3">
 			<a href="http://www.prestashop.com/" target="_blank">PrestaShop&trade; {$ps_version}</a><br />
 			<span>{l s='Load time: '} {number_format(microtime(true) - $timer_start, 3, '.', '')}s</span>
 		</div>
-		<div class="col-lg-3">
+		<div class="col-lg-2">
 			<a class="link-social link-twitter" href="#" title="Twitter">
 				<i class="icon-twitter"></i>
 			</a>
@@ -47,7 +47,7 @@
 			</a>
 		</div>	

-		<div class="col-lg-4">
+		<div class="col-lg-7">
 			<a href="http://www.prestashop.com/en/contact_us/" target="_blank" class="footer_link">{l s='Contact'}</a>
 			|&nbsp;<a href="http://forge.prestashop.com" target="_blank" class="footer_link">{l s='Bug Tracker'}</a>
 			|&nbsp;<a href="http://www.prestashop.com/forums/" target="_blank" class="footer_link">{l s='Forum'}</a>
@@ -30,13 +30,9 @@
 <html lang="{$iso}">
 <head>
 	<meta charset="utf-8">
-
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-
 	<meta name="robots" content="NOFOLLOW, NOINDEX">
-
 	<title>{$meta_title} - PrestaShop&trade;</title>
 	{if $display_header}
 	<script type="text/javascript">
@@ -44,7 +40,6 @@
 		var iso_user = '{$iso_user}';
 		var country_iso_code = '{$country_iso_code}';
 		var _PS_VERSION_ = '{$smarty.const._PS_VERSION_}';
-
 		var helpboxes = {$help_box};
 		var roundMode = {$round_mode};
 			{if isset($shop_context)}
@@ -77,32 +72,26 @@
 		var currentIndex = '{$currentIndex}';
 		var default_language = '{$default_language|intval}';
 		var choose_language_translate = "{l s='Choose language' slashes=1}";
-
 	</script>
 	{/if}
-
 	{if isset($css_files)}
 		{foreach from=$css_files key=css_uri item=media}
 		<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
 		{/foreach}
 	{/if}
-
 	{if isset($js_files)}
 	{foreach from=$js_files item=js_uri}
 		<script type="text/javascript" src="{$js_uri}"></script>
 	{/foreach}
 	{/if}
-
 	<link rel="icon" type="image/vnd.microsoft.icon" href="{$img_dir}favicon.ico" />
 	<link rel="shortcut icon" type="image/x-icon" href="{$img_dir}favicon.ico" />
-
 	{if isset($displayBackOfficeHeader)}
 		{$displayBackOfficeHeader}
 	{/if}
 	<!--[if IE]>
 	<link type="text/css" rel="stylesheet" href="{$base_url}css/admin-ie.css" />
 	<![endif]-->
-
 	{if isset($brightness)}
 	<!--
 		/// multishop
@@ -111,21 +100,28 @@
 		</style>
 	-->
 	{/if}
-
 	<link href='http://fonts.googleapis.com/css?family=Ubuntu:300|Open+Sans' rel='stylesheet' type='text/css'>
-
 </head>

+
 <body class="fixed-top page-sidebar-closed">
-
 {if $display_header}
-
 {* begin  HEADER *}
-	<div id="header">
-		<div id="header_infos" class="navbar navbar-fixed-top">
-			<a id="header_shopname" class="navbar-brand" href="{$link->getAdminLink('AdminHome')|escape:'htmlall':'UTF-8'}">{$shop_name}</a>
-			<ul id="notifs_icon_wrapper" class="nav navbar-nav nav-pills">
+	<header id="header">
+		<nav id="header_infos" class="navbar navbar-fixed-top" role="navigation">

+			<div class="navbar-header">
+				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-secondary">
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+				</button>
+				<a id="header_shopname" class="navbar-brand" href="{$link->getAdminLink('AdminHome')|escape:'htmlall':'UTF-8'}">
+					<img src="{$img_dir}prestashop-avatar.png" height="20" width="20" />
+					{$shop_name}
+				</a>
+			
+				<ul id="notifs_icon_wrapper" class="nav navbar-nav nav-pills">
 {if {$show_new_orders} == 1}
 					<li id="orders_notif" class="dropdown" >
 						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
@@ -134,16 +130,35 @@
 								<span id="orders_notif_value">0</span>
 							</span>
 						</a>
-
-						<ul id="orders_notif_wrapper" class="dropdown-menu notification">
+						<div class="dropdown-menu notification-dropdown">
+							<section id="orders_notif_wrapper" class="notification-panel">
+								<header class="panel-heading">
+									{l s='Last orders'}
+								</header>
+								<div id="list_orders_notif" class="list-group">
+									<a href="#" class="media list-group-item no_notifs">
+										<span class="pull-left">
+											<i class="icon-time"></i>
+										</span>
+										<span class="media-body">
+											{l s='No new orders has been placed on your shop'}<br>
+											<small class="text-muted">1 minute ago</small>
+										</span>
+									</a>
+								</div>
+								<footer class="panel-footer text-small">
+									<a href="index.php?controller=AdminOrders&amp;token={getAdminToken tab='AdminOrders'}">{l s='Show all orders'}</a>
+								</footer>
+							</section>
+						</div>
+						<!-- <ul id="orders_notif_wrapper" class="dropdown-menu notification">
 							<li><p>{l s='Last orders'}</p></li>
 							<li><p class="no_notifs">{l s='No new orders has been placed on your shop'}</p></li>
 							<li><ul id="list_orders_notif"></ul></li>
 							<li><a href="index.php?controller=AdminOrders&amp;token={getAdminToken tab='AdminOrders'}">{l s='Show all orders'} <i class="icon-circle-arrow-right"></i></a></li>
-						</ul>
+						</ul> -->
 					</li>
 {/if}
-
 {if ($show_new_customers == 1)}
 					<li id="customers_notif" class="notifs dropdown">
 						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
@@ -152,16 +167,35 @@
 								<span id="customers_notif_value">0</span>
 							</span>
 						</a>
-
-						<ul id="customers_notif_wrapper" class="dropdown-menu notification">
+						<div class="dropdown-menu notification-dropdown">
+							<section id="customers_notif_wrapper" class="notification-panel">
+								<header class="panel-heading">
+									{l s='Last customers'}
+								</header>
+								<div id="list_orders_notif" class="list-group">
+									<a href="#" class="media list-group-item no_notifs">
+										<span class="pull-left">
+											<i class="icon-time"></i>
+										</span>
+										<span class="media-body">
+											{l s='No new customers registered on your shop'}<br>
+											<small class="text-muted">1 minute ago</small>
+										</span>
+									</a>
+								</div>
+								<footer class="panel-footer text-small">
+									<a href="index.php?controller=AdminCustomers&amp;token={getAdminToken tab='AdminCustomers'}">{l s='Show all customers'}</a>
+								</footer>
+							</section>
+						</div>
+<!-- 					<ul id="customers_notif_wrapper" class="dropdown-menu notification">
 							<li><p>{l s='Last customers'}</p></li>
 							<li><p class="no_notifs">{l s='No new customers registered on your shop'}</p></li>
 							<li><ul id="list_customers_notif"></ul></li>
 							<li><a href="index.php?controller=AdminCustomers&amp;token={getAdminToken tab='AdminCustomers'}">{l s='Show all customers'} <i class="icon-circle-arrow-right"></i></a></li>
-						</ul>
+						</ul> -->
 					</li>
 {/if}
-
 {if {$show_new_messages} == 1}
 					<li id="customer_messages_notif" class="notifs dropdown">
 						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
@@ -170,94 +204,118 @@
 								<span id="customer_messages_notif_value" >0</span>
 							</span>
 						</a>
-
-						<ul id="customer_messages_notif_wrapper" class="dropdown-menu notification">
+						<div class="dropdown-menu notification-dropdown">
+							<section id="customer_messages_notif_wrapper" class="notification-panel">
+								<header class="panel-heading">
+									{l s='Last messages'}
+								</header>
+								<div id="list_orders_notif" class="list-group">
+									<a href="#" class="media list-group-item no_notifs">
+										<span class="pull-left">
+											<i class="icon-time"></i>
+										</span>
+										<span class="media-body">
+											{l s='No new messages posted on your shop'}<br>
+											<small class="text-muted">1 minute ago</small>
+										</span>
+									</a>
+								</div>
+								<footer class="panel-footer text-small">
+									<a href="index.php?tab=AdminCustomerThreads&amp;token={getAdminToken tab='AdminCustomerThreads'}">{l s='Show all messages'}</a>
+								</footer>
+							</section>
+						</div>
+<!-- 						<ul id="customer_messages_notif_wrapper" class="dropdown-menu notification">
 							<li>{l s='Last messages'}</li>
 							<li><p class="no_notifs">{l s='No new messages posted on your shop'}</p></li>
 							<li><ul id="list_customer_messages_notif"></ul></li>
 							<li><a href="index.php?tab=AdminCustomerThreads&amp;token={getAdminToken tab='AdminCustomerThreads'}">{l s='Show all messages'} <i class="icon-circle-arrow-right"></i></a></li>
-						</ul>
+						</ul> -->
 					</li>
 {/if}
-			</ul>
+				</ul>

-			<ul id="employee_box" class="nav navbar-nav pull-right">
-				<li id="employee_infos" class="dropdown">
-					<a href='#' class="employee_name dropdown-toggle" data-toggle="dropdown">{$first_name}&nbsp;{$last_name} <i class="icon-angle-down"></i></a>
-					<ul id="employee_links" class="dropdown-menu">
-						<li><a href="{$link->getAdminLink('AdminEmployees')|escape:'htmlall':'UTF-8'}&id_employee={$employee->id}&amp;updateemployee"><i class="icon-wrench"></i> {l s='My preferences'}</a></li>
-						<li><a id="header_logout" href="index.php?logout"><i class="icon-signout"></i> {l s='logout'}</a></li>
+				<ul id="employee_box" class="nav navbar-nav navbar-right">
+					<li id="employee_infos" class="dropdown">
+						<a href='#' class="employee_name dropdown-toggle" data-toggle="dropdown">
+							{$first_name}&nbsp;{$last_name}
+							<img src="{$img_dir}prestashop-avatar.png" height="15" width="15" />
+							<i class="icon-angle-down"></i>
+						</a>
+						<ul id="employee_links" class="dropdown-menu">
+							<li><a href="{$link->getAdminLink('AdminEmployees')|escape:'htmlall':'UTF-8'}&id_employee={$employee->id}&amp;updateemployee"><i class="icon-wrench"></i> {l s='My preferences'}</a></li>
+							<li><a id="header_logout" href="index.php?logout"><i class="icon-signout"></i> {l s='logout'}</a></li>
 {if {$base_url}}
-						<li class="divider"></li>
-						<li><a href="{$base_url}" id="header_foaccess" target="_blank" title="{l s='View my shop'}"><i class="icon-eye-open"></i> {l s='View my shop'}</a></li>
+							<li class="divider"></li>
+							<li><a href="{$base_url}" id="header_foaccess" target="_blank" title="{l s='View my shop'}"><i class="icon-eye-open"></i> {l s='View my shop'}</a></li>
 {/if}
-					</ul>
-				</li>
-			</ul>
+						</ul>
+					</li>
+				</ul>

-			<div id="header_search">
-				<form class="navbar-form" method="post" action="index.php?controller=AdminSearch&amp;token={getAdminToken tab='AdminSearch'}">
-					<div class="input-group col-lg-2">
-						<input type="text" name="bo_query" id="bo_query" value="{$bo_query}" class="input-medium" palceholder="{l s='Search'}"/>
-						<span class="input-group-btn">
-							<button type="submit" id="bo_search_submit" class="btn btn-default">
-								<i class="icon-search"></i>
-							</button>
-						</span>
-					</div>
-<!-- 	//todo Search in section 
-					<select name="bo_search_type" id="bo_search_type" class="chosen no-search">
-						<option value="0">{l s='everywhere'}</option>
-						<option value="1" {if {$search_type} == 1} selected="selected" {/if}>{l s='catalog'}</option>
-						<optgroup label="{l s='customers'}:">
-							<option value="2" {if {$search_type} == 2} selected="selected" {/if}>{l s='by name'}</option>
-							<option value="6" {if {$search_type} == 6} selected="selected" {/if}>{l s='by ip address'}</option>
-						</optgroup>
-						<option value="3" {if {$search_type} == 3} selected="selected" {/if}>{l s='orders'}</option>
-						<option value="4" {if {$search_type} == 4} selected="selected" {/if}>{l s='invoices'}</option>
-						<option value="5" {if {$search_type} == 5} selected="selected" {/if}>{l s='carts'}</option>
-						<option value="7" {if {$search_type} == 7} selected="selected" {/if}>{l s='modules'}</option>
-					</select> -->
-				</form>
-			</div>
+				<div class="collapse navbar-collapse navbar-collapse-secondary">
+					<form id="header_search" class="navbar-form" method="post" action="index.php?controller=AdminSearch&amp;token={getAdminToken tab='AdminSearch'}">
+						<div class="input-group col-lg-2">
+							<input type="text" name="bo_query" id="bo_query" value="{$bo_query}" class="form-control" palceholder="{l s='Search'}"/>
+							<span class="input-group-btn">
+								<button type="submit" id="bo_search_submit" class="btn btn-default">
+									<i class="icon-search"></i>
+								</button>
+							</span>
+						</div>
+						<!-- 	//todo Search in section 
+						<select name="bo_search_type" id="bo_search_type" class="chosen no-search">
+							<option value="0">{l s='everywhere'}</option>
+							<option value="1" {if {$search_type} == 1} selected="selected" {/if}>{l s='catalog'}</option>
+							<optgroup label="{l s='customers'}:">
+								<option value="2" {if {$search_type} == 2} selected="selected" {/if}>{l s='by name'}</option>
+								<option value="6" {if {$search_type} == 6} selected="selected" {/if}>{l s='by ip address'}</option>
+							</optgroup>
+							<option value="3" {if {$search_type} == 3} selected="selected" {/if}>{l s='orders'}</option>
+							<option value="4" {if {$search_type} == 4} selected="selected" {/if}>{l s='invoices'}</option>
+							<option value="5" {if {$search_type} == 5} selected="selected" {/if}>{l s='carts'}</option>
+							<option value="7" {if {$search_type} == 7} selected="selected" {/if}>{l s='modules'}</option>
+						</select> -->
+					</form>

 {if count($quick_access) > 0}
-			<div id="header_quick" class="btn-group navbar-nav">
-				<a href="#" id="quick_select" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{l s='Quick Access'} <b class="caret"></b></a>
-				<ul class="dropdown-menu">
-				{foreach $quick_access as $quick}
-					<li><a href="{$quick.link|escape:'htmlall':'UTF-8'}{if $quick.new_window}_blank{/if}"><i class="icon-chevron-right"></i> {$quick.name}</a></li>
-				{/foreach}
-				</ul>
-			</div>
+					<div id="header_quick" class="btn-group navbar-nav">
+						<a href="#" id="quick_select" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{l s='Quick Access'} <b class="caret"></b></a>
+						<ul class="dropdown-menu">
+						{foreach $quick_access as $quick}
+							<li><a href="{$quick.link|escape:'htmlall':'UTF-8'}{if $quick.new_window}_blank{/if}"><i class="icon-chevron-right"></i> {$quick.name}</a></li>
+						{/foreach}
+						</ul>
+					</div>
 {/if}
+					<span id="ajax_running" class="navbar-text">
+						<i class="icon-refresh icon-spin"></i> {l s='Loading...'}
+					</span>
+				</div>
+			</div>

-			<span id="ajax_running" class="navbar-text">
-				<i class="icon-refresh icon-spin"></i> {l s='Loading...'}
-			</span>
 {if isset($displayBackOfficeTop)}{$displayBackOfficeTop}{/if}
-		</div>{* end header_infos*}
-	</div>
+		</nav>{* end header_infos*}
+	</header>
 {* end header*}	
 {/if}

 	<div id="main">

-		<div id="sidebar" data-spy="affix" data-offset-top="0" class="page-sidebar nav-collapse collapse">
-      	{if !$tab}
+		<nav id="topbar" class="hide" role="navigation">
+		{if !$tab}
 			<div class="mainsubtablist" style="display:none"></div>
 		{/if}
 			<span class="menu-collapse">
 				<i class="icon-align-justify"></i>
 			</span>
-
 			<script type="text/javascript">
 				$('.menu-collapse').click(function(){
 					$('body').toggleClass('page-sidebar-closed');
 				});
 			</script>
 			{if $controller_name != 'AdminLogin'}
-			<ul id="menu">
+			<ul class="menu">
 				<li class="maintab">
 					<a href="{$link->getAdminLink('AdminHome')|escape:'htmlall':'UTF-8'}" class="title">
 						<i class="icon-AdminDashboard"></i>
@@ -288,18 +346,63 @@
 			{/foreach}
 			</ul>
 			{/if}
-		</div>
+		</nav>
+
+
+		<nav id="sidebar" data-spy="affix" data-offset-top="0" class="page-sidebar nav-collapse collapse navbar-collapse-primary" role="navigation">
+		{if !$tab}
+			<div class="mainsubtablist" style="display:none"></div>
+		{/if}
+			<span class="menu-collapse">
+				<i class="icon-align-justify"></i>
+			</span>
+			<script type="text/javascript">
+				$('.menu-collapse').click(function(){
+					$('body').toggleClass('page-sidebar-closed');
+				});
+			</script>
+			{if $controller_name != 'AdminLogin'}
+			<ul class="menu">
+				<li class="maintab">
+					<a href="{$link->getAdminLink('AdminHome')|escape:'htmlall':'UTF-8'}" class="title">
+						<i class="icon-AdminDashboard"></i>
+						<span class="title">{l s='Dashboard'}</span>
+					</a>
+				</li>
+			{foreach $tabs as $t}
+				{if $t.active}
+				<li class="maintab {if $t.current}active{/if}" id="maintab{$t.id_tab}">
+					<a href="javascript:adminNav('#maintab{$t.id_tab}');" class="title">
+						<i class="icon-{$t.class_name}"></i>
+						<span class="title">{if $t.name eq ''}{$t.class_name}{else}{$t.name}{/if}</span>
+					</a>
+					<ul class="submenu">
+					{foreach from=$t.sub_tabs item=t2}
+						{if $t2.active}
+						<li {if $t2.current} class="active"{/if}>
+							<a href="{$t2.href|escape:'htmlall':'UTF-8'}">
+								{if $t2.name eq ''}{$t2.class_name}{else}{$t2.name|escape:'htmlall':'UTF-8'}{/if}
+								<!-- <i class="icon-chevron-sign-right pull-right"></i> -->
+							</a>
+						</li>
+						{/if}
+					{/foreach}
+					</ul>
+				</li>
+				{/if}
+			{/foreach}
+			</ul>
+			{/if}
+		</nav>

 		<div id="content" class="page-content">
-
-			{if $display_header && $install_dir_exists}
-				<div class="alert alert-block">
-					{l s='For security reasons, you must also:'}&nbsp;{l s='delete the /install folder'}
-				</div>
-			{/if}
-
-			{if $display_header && $is_multishop && $shop_list && ($multishop_context & Shop::CONTEXT_GROUP || $multishop_context & Shop::CONTEXT_SHOP)}
-				<div class="multishop_toolbar">
-					<span class="text_multishop">{l s='Multistore configuration for'}</span> {$shop_list}
-				</div>
-			{/if}
+{if $display_header && $install_dir_exists}
+			<div class="alert alert-block">
+				{l s='For security reasons, you must also:'}&nbsp;{l s='delete the /install folder'}
+			</div>
+{/if}
+{if $display_header && $is_multishop && $shop_list && ($multishop_context & Shop::CONTEXT_GROUP || $multishop_context & Shop::CONTEXT_SHOP)}
+			<div class="multishop_toolbar">
+				<span class="text_multishop">{l s='Multistore configuration for'}</span> {$shop_list}
+			</div>
+{/if}
@@ -0,0 +1,214 @@
+{*
+* 2007-2013 PrestaShop
+*
+* NOTICE OF LICENSE
+*
+* This source file is subject to the Academic Free License (AFL 3.0)
+* that is bundled with this package in the file LICENSE.txt.
+* It is also available through the world-wide-web at this URL:
+* http://opensource.org/licenses/afl-3.0.php
+* If you did not receive a copy of the license and are unable to
+* obtain it through the world-wide-web, please send an email
+* to license@prestashop.com so we can send you a copy immediately.
+*
+* DISCLAIMER
+*
+* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+* versions in the future. If you wish to customize PrestaShop for your
+* needs please refer to http://www.prestashop.com for more information.
+*
+*  @author PrestaShop SA <contact@prestashop.com>
+*  @copyright  2007-2013 PrestaShop SA
+*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
+*  International Registered Trademark & Property of PrestaShop SA
+*}
+<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+
+<div id="box-clients" class="col-lg-3 box-stats color1" >
+	<div class="boxchart-overlay">
+		<div class="boxchart"></div>
+	</div>	
+	<span class="title">Clients / 1 month</span>
+	<span class="value">4 589</span>
+</div>
+
+<div id="box-orders" class="col-lg-3 box-stats color2">
+	<div class="boxchart-overlay">
+		<div class="boxchart"></div>
+	</div>	
+	<span class="title">Orders / 1 month</span>
+	<span class="value">789</span>
+</div>
+
+<div id="box-income" class="col-lg-3 box-stats color3">
+	<i class="icon-money"></i>
+	<span class="title">Income / 1 month</span>
+	<span class="value">$999,99</span>
+</div>
+
+<div id="box-messages" class="col-lg-3 box-stats color4">
+	<i class="icon-envelope-alt"></i>
+	<span class="title">Messages / 1 month</span>
+	<span class="value">19</span>
+</div>
+
+<div class="clearfix"></div>
+
+<div id="box-pie" class="col-lg-6 box-stats">
+	<div class="boxchart-overlay">
+		<div class="boxchart"></div>
+	</div>
+	<span class="title">Total</span>
+	<span class="value">19</span>
+	<ul class="list-unstyled">
+		<!-- <li>Nombre total de sujets <span class="badge">0</span></li> -->
+		<li>{l s='Sujets en attente'} <span class="badge">0</span></li>
+		<li>{l s='Total de messages de clients'}<span class="badge">0</span></li>
+		<li>{l s='Total de messages d\'employés'}<span class="badge">0</span></li>
+		<li>{l s='Sujets non lu'}<span class="badge">0</span></li>
+		<li>{l s='Sujets clos'}<span class="badge">0</span></li>
+	</ul>
+</div>
+
+<div id="box-line" class="col-lg-3 box-stats color1" >
+	<div class="boxchart-overlay">
+		<div class="boxchart"></div>
+	</div>	
+	<span class="title">Trafic / 1 month</span>
+	<span class="value">4 589</span>
+</div>
+
+<div id="box-spline" class="col-lg-3 box-stats color2" >
+	<div class="boxchart-overlay">
+		<div class="boxchart"></div>
+	</div>	
+	<span class="title">Conversion / 1 month</span>
+	<span class="value">4 589</span>
+</div>
+
+<div class="clearfix"></div>
+
+<script>
+	var data = [4, 8, 15, 16, 23, 42, 8, 15, 16, 23, 42, 16, 23, 42, 8, 15, 15, 16, 23];
+	var chart = d3.select("#box-clients .boxchart").append("svg")
+		.attr("class", "chart")
+		.attr("width", data.length * 6)
+		.attr("height", 30);
+	var y = d3.scale.linear()
+		.domain([0, d3.max(data)])
+		.range([0, d3.max(data)]);
+	chart.selectAll("rect")
+		.data(data)
+		.enter().append("rect")
+		.attr("y", function(d) { return 30 - d; })
+		.attr("x", function(d, i) { return i * 6; })
+		.attr("width", 4)
+		.attr("height", y);
+</script>
+
+<script>
+	var data = [4, 8, 15, 16, 23, 42, 8, 15, 16];
+	var chart = d3.select("#box-orders .boxchart").append("svg")
+		.attr("class", "chart")
+		.attr("width", data.length * 6)
+		.attr("height", 30);
+	var y = d3.scale.linear()
+		.domain([0, d3.max(data)])
+		.range([0, d3.max(data)]);
+	chart.selectAll("rect")
+		.data(data)
+		.enter().append("rect")
+		.attr("y", function(d) { return 30 - d; })
+		.attr("x", function(d, i) { return i * 6; })
+		.attr("width", 4)
+		.attr("height", y);
+</script>
+
+<script>
+	var myColors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
+	d3.scale.myColors = function() {
+		  return d3.scale.ordinal().range(myColors);
+	};
+
+	var data = [53245, 28479, 19697, 24037, 30245];
+	var width = 140,
+		height = 140,
+		radius = Math.min(width, height) / 2;
+	var color = d3.scale.ordinal().range(myColors);
+	var pie = d3.layout.pie()
+		.sort(null);
+	var arc = d3.svg.arc()
+		.innerRadius(radius - 140)
+		.outerRadius(radius - 120);
+	var svg = d3.select("#box-pie .boxchart").append("svg")
+		.attr("width", width)
+		.attr("height", height)
+		.append("g")
+		.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+	var path = svg.selectAll("path")
+		.data(pie(data))
+		.enter().append("path")
+		.attr("fill", function(d, i) { return color(i); })
+		.attr("d", arc);
+</script>
+
+<script>
+	var data = [3, 6, 2, 7, 5, 12, 1, 3, 8, 9, 2, 5, 7],
+		w = 120,
+		h = 50,
+		margin = 5,
+		y = d3.scale.linear().domain([0, d3.max(data)]).range([0 + margin, h - margin]),
+		x = d3.scale.linear().domain([0, data.length]).range([0 + margin, w - margin]);
+	var vis = d3.select("#box-line .boxchart").append("svg")
+		.attr("class", "chart")
+		.attr("width", w)
+		.attr("height", h);
+	var g = vis.append("g")
+		.attr("transform", "translate(0, 50)");
+	var line = d3.svg.line()
+		.x(function(d,i) { return x(i); })
+		.y(function(d) { return -1 * y(d); });
+	g.append("path").attr("d", line(data));
+
+	vis.selectAll("dot")
+		.data(data)
+		.enter().append("circle")
+		.attr("stroke", "#1BA6E5")
+		.attr("stroke-width", 1)
+		.attr("r", 3)
+		.attr("transform", "translate(0, 50)")
+		.attr("fill", "white")
+		.attr("cx", function(d, i) { return x(i); })
+		.attr("cy", function(d, i) { return -1 * y(d); });
+
+	var	area = d3.svg.area()
+		.x(function(d, i) { return x(i); })
+		.y0(h)
+		.y1(function(d, i) { return -1 * y(d); });
+
+	g.append("path")
+		.datum(data)
+		.attr("class", "area")
+		.attr("d", area);
+
+</script>
+
+<script>
+	var data = [3, 6, 2, 7, 5, 12, 1, 3, 8, 9, 2, 5, 7],
+		w = 120,
+		h = 50,
+		margin = 5,
+		y = d3.scale.linear().domain([0, d3.max(data)]).range([0 + margin, h - margin]),
+		x = d3.scale.linear().domain([0, data.length]).range([0 + margin, w - margin]);
+	var vis = d3.select("#box-spline .boxchart").append("svg")
+		.attr("class", "chart")
+		.attr("width", w)
+		.attr("height", h);
+	var g = vis.append("g")
+		.attr("transform", "translate(0, 50)");
+	var line = d3.svg.line()
+		.interpolate("basis")
+		.x(function(d,i) { return x(i); })
+		.y(function(d) { return -1 * y(d); });
+	g.append("path").attr("d", line(data));
+</script>
@@ -3011,7 +3011,7 @@ class AdminControllerCore extends Controller
 					$html = '<a class="';

 					if (count($return) == 0)
-						$html .= 'btn btn-default btn-small';
+						$html .= 'btn btn-default';

 					$html .= '" href="'.$option['href'].(!is_null($back) ? '&back='.urlencode($back) : '').'" onclick="'.$option['onclick'].'"  title="'.$option['title'].'"><i class="icon-'.(isset($option['icon']) && $option['icon'] ? $option['icon']:'cog' ).'"></i> '.$option['text'].'</a>';
 					$return[] = $html;
@@ -195,8 +195,7 @@ class AdminProductsControllerCore extends AdminController
 		$this->fields_list['id_product'] = array(
 			'title' => $this->l('ID'),
 			'align' => 'center',
-			'type' => 'int',
-			'width' => 40
+			'type' => 'int'
 		);
 		$this->fields_list['image'] = array(
 			'title' => $this->l('Photo'),
@@ -223,7 +222,6 @@ class AdminProductsControllerCore extends AdminController
 		else
 			$this->fields_list['name_category'] = array(
 				'title' => $this->l('Category'),
-				'width' => 'auto',
 				'filter_key' => 'cl!name',
 			);
 		$this->fields_list['price'] = array(
@@ -3764,11 +3762,11 @@ class AdminProductsControllerCore extends AdminController

 		$this->fields_list = array(
 			'attributes' => array('title' => $this->l('Attributes'), 'align' => 'left'),
-			'price' => array('title' => $this->l('Impact'), 'type' => 'price', 'align' => 'left', 'width' => 70),
-			'weight' => array('title' => $this->l('Weight'), 'align' => 'left', 'width' => 70),
-			'reference' => array('title' => $this->l('Reference'), 'align' => 'left', 'width' => 70),
-			'ean13' => array('title' => $this->l('EAN13'), 'align' => 'left', 'width' => 70),
-			'upc' => array('title' => $this->l('UPC'), 'align' => 'left', 'width' => 70)
+			'price' => array('title' => $this->l('Impact'), 'type' => 'price', 'align' => 'left'),
+			'weight' => array('title' => $this->l('Weight'), 'align' => 'left'),
+			'reference' => array('title' => $this->l('Reference'), 'align' => 'left'),
+			'ean13' => array('title' => $this->l('EAN13'), 'align' => 'left'),
+			'upc' => array('title' => $this->l('UPC'), 'align' => 'left')
 		);

 		if ($product->id)