Merge
authorAnthony Ly <anthonyly.com@gmail.com>
Wed, 26 Jun 2013 11:25:08 +0200
changeset 156 2e86d9209ef4
parent 155 551ae48cdf0b (current diff)
parent 153 a6777893243d (diff)
child 157 7263f299f37f
child 160 7f141426ccbf
Merge
integration/v2/css/style.css
src/egonomy/static/egonomy/css/egonomy.css
src/egonomy/static/egonomy/css/jquery-ui.css
src/egonomy/static/egonomy/css/jquery.tagit.css
src/egonomy/static/egonomy/css/tagit.ui-zendesk.css
--- a/.hgtags	Wed Jun 26 11:24:48 2013 +0200
+++ b/.hgtags	Wed Jun 26 11:25:08 2013 +0200
@@ -16,3 +16,4 @@
 2b004344ebf277231f4441d62e7efdcd22ebea32 V00.03.02
 142c80c17041a9da6fb2612b0b776a829335dfb2 V00.04
 741e46d64fdc06f9cef901bbd9fd8d0e5c259d8c V00.05
+8ff52b74468391ba8980049d4119a7b1892d9415 V00.06
--- a/integration/v2/css/style.css	Wed Jun 26 11:24:48 2013 +0200
+++ b/integration/v2/css/style.css	Wed Jun 26 11:25:08 2013 +0200
@@ -3,7 +3,6 @@
 .wrap{width: 950px; margin: 0 auto; }
 .uppercase{text-transform: uppercase;}
 .fragment{width: 225px; height: 225px;}
-.fragment-110{width: 110px; height: 110px; display: inline-block;}
 .va-top{vertical-align: top;padding-top: 4px;}
 header, footer{width:100%;background: url(../img/border-bottom-header.png) center bottom no-repeat;}
 footer{margin-bottom: 60px;background-position: top center; padding-top: 20px;font-size: 15px; font-family: 'Lato'; font-weight: 300;}
@@ -43,13 +42,13 @@
 
 .fs-15{font-size: 15px !important;}
 .edition-table-left{
-	width: 700px !important;
-	float: left;
+    width: 700px !important;
+    float: left;
 }
 .edition-table-right{
-	text-align: right;
-	width: 180px !important;
-	float: right;
+    text-align: right;
+    width: 180px !important;
+    float: right;
 }
 .bar-tools{margin-bottom: 12px; line-height: 35px; padding-bottom: 1px; font-family: 'Lato'; font-weight: 300; display:block;background-image: url(../img/border-bar-tools.png), url(../img/border-bar-tools.png); background-position: top center, bottom center; background-repeat: repeat-x;}
 .bar-tools h3{ font-size: 18px;  display: inline-block; text-transform: uppercase;}
@@ -265,7 +264,12 @@
 body{overflow: auto !important;}
 #map{width: 100%; height: 400px;}
 
+
 /* imported */
+.square-fragment-110 {
+    height: 110px;
+    width: 110px;
+}
 .square-fragment-225 {
     height: 225px;
     width: 225px;
@@ -307,6 +311,51 @@
 .image-and-fragment svg, .cutout-canvas {
     position: absolute; top: 0; left: 0; width: 100%; height: 100%;
 }
+.sub_svg_image {
+    opacity: .3;
+}
+.sub_svg_image:hover {
+    opacity: 1;
+}
+/* search highlight */
 .highlight {
     background: #ffff80;
-}
\ No newline at end of file
+}
+/* Seeseetive api responses */
+.btn.inactive {
+    cursor: default;
+    background-color: #CCC;
+}
+.btn.loader {
+    background: #666 url(images/loader.gif) right no-repeat;
+    background-size: 25px 25px;
+    padding-right: 30px;
+}
+.add-button-grey {
+    background: #AAAAAA; margin: 5px 0; padding: 6px; border-radius: 4px; color: #555555;
+    font-weight: bold; font-size: 13px; float: left;
+}
+.senapi_li {
+    margin: 0 0 5px 0;
+    overflow: auto;
+}
+.senapi_img {
+    float: left;
+    margin: 0 5px 5px 0;
+}
+.senapi_tags {
+    font-size: .7em;
+}
+.senapi_text {
+    
+}
+#info_tag{
+    background-color: white;
+    border: 1px solid #AAAAAA;
+    pointer-events: none;
+    position: absolute;
+    z-index: 1000;
+}
+#info_tag img{
+    margin: 5px;
+}
--- a/src/egonomy/__init__.py	Wed Jun 26 11:24:48 2013 +0200
+++ b/src/egonomy/__init__.py	Wed Jun 26 11:25:08 2013 +0200
@@ -1,4 +1,4 @@
-VERSION = (0, 6, 0, "beta", 1)
+VERSION = (0, 6, 1, "final", 1)
 
 VERSION_STR = unicode(".".join(map(lambda i:"%02d" % (i,), VERSION[:2])))
 
--- a/src/egonomy/models.py	Wed Jun 26 11:24:48 2013 +0200
+++ b/src/egonomy/models.py	Wed Jun 26 11:25:08 2013 +0200
@@ -95,6 +95,11 @@
     description = models.TextField(blank=True, null=True)
     tags = models.TextField(blank=True, null=True)
     
+    @property
+    def tag_list(self):
+        # tags in list
+        return self.tags.split(",")
+    
     
     def get_viewbox_info(self):
         if not self.coordinates or self.coordinates=="MZ" or self.coordinates=="":
--- a/src/egonomy/static/egonomy/css/egonomy.css	Wed Jun 26 11:24:48 2013 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,422 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-    display: block;
-}
-body {
-    line-height: 1;
-}
-ol, ul {
-    list-style: none;
-}
-blockquote, q {
-    quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: '';
-    content: none;
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-.clear{
-    clear: both;
-}
-
-input::-moz-focus-inner {
-    border: 0 none;
-    padding: 0;
-}
-
-/* END RESET.CSS */
-
-html {
-    font-family: Arial, Helvetica, sans-serif;
-}
-
-body {
-    background: #FFFFFF;
-}
-
-a {
-    text-decoration: none; color: inherit;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-.fullwidth {
-    width: 100%; float: left; clear: both;
-}
-
-header, .main {
-    width: 968px; margin: 0 auto;
-}
-
-.header-wrap {
-    background: #666666; /* Old browsers */
-    background: -moz-linear-gradient(top,  #666666 20%, #333333 80%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#666666), color-stop(80%,#333333)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #666666 20%,#333333 80%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  #666666 20%,#333333 80%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #666666 20%,#333333 80%); /* IE10+ */
-    background: linear-gradient(to bottom,  #666666 20%,#333333 80%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
-}
-
-header {
-    height: 40px; 
-}
-
-
-h1 {
-    font-weight: bold;
-    font-size: 24px;
-    text-shadow: 1px 1px 1px #000; color: #f0f0f0;
-}
-
-nav {
-    text-align: right; color: #ffffff; font-size: 13px; margin: 5px 0;
-}
-
-h2 {
-    font-size: 18px; font-weight: bold; color: #003366;
-    margin: 10px 0 5px; padding-bottom: 5px; border-bottom: 1px solid #666;
-}
-
-h3 {
-    font-size: 13px; font-weight: bold; color: #555555; margin: 4px 0;
-}
-
-h4 {
-    font-size: 12px; font-style: italic; margin: 4px 0;
-}
-
-p {
-    font-size: 11px; margin: 4px 0;
-}
-
-strong {
-    font-weight: bold;
-}
-
-.right{
-	float: right;
-}
-
-.main-wrap {
-    background: #ffffff; /* Old browsers */
-    background: -moz-linear-gradient(top,  #f0f0f0 20%, #ffffff 80%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#f0f0f0), color-stop(80%,#ffffff)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #f0f0f0 20%,#ffffff 80%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  #f0f0f0 20%,#ffffff 80%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #f0f0f0 20%,#ffffff 80%); /* IE10+ */
-    background: linear-gradient(to bottom,  #f0f0f0 20%,#ffffff 80%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
-}
-
-footer {
-    margin: 40px 0 20px; padding: 10px 0 0; border-top: 1px solid #666;
-}
-
-.footer-list li {
-    float: right; margin-left: 10px;
-}
-
-.search-field {
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    border: none; background: #d0e0FF;
-    padding: 2px; margin: 2px 0; height: 20px;
-    font-size: 13px; width: 210px; float: left;
-    line-height: 20px; height: 20px;
-}
-
-.search-type {
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    border: none; background: #E0E0E0;
-    float: left; width: 100px;
-    padding: 2px; margin: 2px 0 0 1px;
-    font-size: 13px;
-    line-height: 20px; height: 20px;
-}
-
-.placeholder {
-    background: #d0e0FF;
-}
-
-.column {
-    float: left; margin: 6px 0 6px 16px;
-}
-
-.subcol {
-    float: left; margin: 2px 0 4px 12px;
-}
-
-.column-third {
-    float: left; width: 312px;
-}
-
-.column-third:nth-child(3n+1) {
-    margin-left: 0; clear: left;
-}
-
-.subcol-third-third {
-    width: 96px; 
-}
-
-.subcol-third-third:nth-child(3n+1) {
-    margin-left: 0; clear: left;
-}
-
-.column-half {
-    width: 476px;
-}
-
-.column-half:nth-child(2n+1) {
-    margin-left: 0; clear: left;
-}
-
-.subcol-half-fourth {
-    width: 110px;
-}
-
-.subcol-half-fourth:nth-child(4n+1) {
-    margin-left: 0; clear: left;
-}
-
-
-.column-full {
-    margin-left: 0; width: 968px;
-}
-
-.subcol-eighth {
-    width: 110px; margin-left: 12px;
-}
-
-.subcol-eighth:nth-child(even) {
-    margin-left: 13px;
-}
-
-.subcol-eighth:nth-child(8n+1) {
-    margin-left: 0; clear: left;
-}
-
-.center-image {
-    text-align: center;
-}
-
-.image-and-fragment {
-    position: relative; margin: 0 auto; display: inline-block;
-}
-
-.little_square_fragment {
-    height: 110px; width: 110px;
-}
-
-.large_square_fragment {
-    height: 476px; width: 476px;
-}
-
-.center-image img {
-    display: inline-block;
-}
-/*
-.image-and-fragment img:after {
-    content: "."; display: block; clear: both; width: 0; line-height: 0; visibility: hidden;
-}
-*/
-.image-and-fragment svg, .cutout-canvas {
-    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-}
-
-.sub_svg_image {
-    opacity: .3;
-}
-.sub_svg_image:hover {
-    opacity: 1;
-}
-
-/* STYLES SPECIFIQUES A home.html */
-
-.homeviz {
-    float: left; width: 968px; height: 400px; margin: 2px 0 4px;
-}
-
-/* STYLES SPECIFIQUES A image.html */
-
-.image-metadata {
-    width: 100%; margin: 30px 0 0; font-size: 14px;
-}
-
-.image-metadata th {
-    font-weight: bold; width: 152px; text-align: left; padding: 4px 10px 4px 0; vertical-align: top;
-}
-
-.image-metadata td {
-    width: 314px; padding: 4px 0;
-}
-
-.image-metadata input[type=text] {
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    width: 100%; border: 1px solid #6699FF; background: #FFFFFF;
-    padding: 2px; margin: 3px 0;
-    font-size: 13px;
-}
-
-.image-metadata textarea {
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    width: 100%; border: 1px solid #6699FF; background: #FFFFFF;
-    padding: 2px; margin: 3px 0; height: 100px;
-    font-size: 13px;
-    resize: none;
-}
-
-.image-keywords {
-    width: 100%; margin: 10px 0 0;
-}
-
-.image-keywords th {
-    font-size: 14px; font-weight: bold; text-align: left; padding: 4px 0 4px 0; width: 33%;
-}
-
-.image-keywords tbody tr:nth-child(odd) {
-    background: #e0e0e0;
-}
-
-.image-keywords td {
-    font-size: 13px; text-align: left; padding: 4px 4px 4px 0;
-}
-
-.add-button {
-    background: #D0E0FF; margin: 5px 0; padding: 6px; border-radius: 4px; color: #003366;
-    font-weight: bold; font-size: 13px; float: left;
-}
-.add-button-grey {
-    background: #AAAAAA; margin: 5px 0; padding: 6px; border-radius: 4px; color: #555555;
-    font-weight: bold; font-size: 13px; float: left;
-}
-.loader {
-	background: #D0E0FF url(images/loader.gif) right no-repeat;
-	background-size: 25px 25px;
-	padding-right: 30px;
-}
-
-.big-button {
-    background: #D0E0FF; margin: 10px 0 10px 16px; padding: 8px; border-radius: 4px; color: #003366;
-    font-weight: bold; font-size: 15px; width: 214px; text-align: center; float: left;
-}
-
-.big-button:first-child {
-    margin-left: 0;
-}
-
-.highlight {
-    background: #ffff80;
-}
-
-/* STYLES SPECIFIQUES A fragment-edit */
-
-.head-button {
-    font-weight: bold; float: right; margin: 8px 0 0 2px; font-size: 20px;
-}
-
-a.clear-fragment {
-    color: #800000;
-}
-
-/* loginform_div style */
-#loginform_div, #loginform_div ul, #loginform_div li{
-    margin: 10px 0 5px;
-}
-
-/* add tags buttons style */
-.clickable:hover{
-    text-decoration: underline;
-    cursor: hand; cursor: pointer;
-}
-
-/* red cross on top right corner */
-.options_on_hover{
-	position: relative;
-}
-.options_on_hover:hover > a > .top_right_options{
-    display: block;
-}
-.top_right_options{
-    background-image: url("images/ui-icons_454545_256x240.png");
-    background-position: -34px -194px;
-    background-repeat: no-repeat;
-    cursor: pointer;
-    display: none;
-    height: 12px;
-    position: absolute;
-    right: -5px;
-    top: -5px;
-    width: 12px;
-}
-.top_right_options:hover{
-    background-image: url("images/ui-icons_cd0a0a_256x240.png");
-}
-
-/* Seeseetive api responses */
-.senapi_li {
-    margin: 0 0 5px 0;
-    overflow: auto;
-}
-.senapi_img {
-    float: left;
-    margin: 0 5px 5px 0;
-}
-.senapi_tags {
-    font-size: .7em;
-}
-.senapi_text {
-	
-}
-#info_tag{
-    background-color: white;
-    border: 1px solid #AAAAAA;
-    pointer-events: none;
-    position: absolute;
-    z-index: 1000;
-}
-#info_tag img{
-    margin: 5px;
-}
\ No newline at end of file
--- a/src/egonomy/static/egonomy/css/jquery-ui.css	Wed Jun 26 11:24:48 2013 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,1175 +0,0 @@
-/*! jQuery UI - v1.10.1 - 2013-02-15
-* http://jqueryui.com
-* Includes: jquery.ui.core.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css
-* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Helvetica%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=2px&bgColorHeader=dddddd&bgTextureHeader=highlight_soft&bgImgOpacityHeader=50&borderColorHeader=dddddd&fcHeader=444444&iconColorHeader=0073ea&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=dddddd&fcContent=444444&iconColorContent=ff0084&bgColorDefault=f6f6f6&bgTextureDefault=highlight_soft&bgImgOpacityDefault=100&borderColorDefault=dddddd&fcDefault=0073ea&iconColorDefault=666666&bgColorHover=0073ea&bgTextureHover=highlight_soft&bgImgOpacityHover=25&borderColorHover=0073ea&fcHover=ffffff&iconColorHover=ffffff&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=dddddd&fcActive=ff0084&iconColorActive=454545&bgColorHighlight=ffffff&bgTextureHighlight=flat&bgImgOpacityHighlight=55&borderColorHighlight=cccccc&fcHighlight=444444&iconColorHighlight=0073ea&bgColorError=ffffff&bgTextureError=flat&bgImgOpacityError=55&borderColorError=ff0084&fcError=222222&iconColorError=ff0084&bgColorOverlay=eeeeee&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=80&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=60&thicknessShadow=4px&offsetTopShadow=-4px&offsetLeftShadow=-4px&cornerRadiusShadow=0px
-* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */
-
-/* Layout helpers
-----------------------------------*/
-.ui-helper-hidden {
-	display: none;
-}
-.ui-helper-hidden-accessible {
-	border: 0;
-	clip: rect(0 0 0 0);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-}
-.ui-helper-reset {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	outline: 0;
-	line-height: 1.3;
-	text-decoration: none;
-	font-size: 100%;
-	list-style: none;
-}
-.ui-helper-clearfix:before,
-.ui-helper-clearfix:after {
-	content: "";
-	display: table;
-	border-collapse: collapse;
-}
-.ui-helper-clearfix:after {
-	clear: both;
-}
-.ui-helper-clearfix {
-	min-height: 0; /* support: IE7 */
-}
-.ui-helper-zfix {
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	position: absolute;
-	opacity: 0;
-	filter:Alpha(Opacity=0);
-}
-
-.ui-front {
-	z-index: 100;
-}
-
-
-/* Interaction Cues
-----------------------------------*/
-.ui-state-disabled {
-	cursor: default !important;
-}
-
-
-/* Icons
-----------------------------------*/
-
-/* states and images */
-.ui-icon {
-	display: block;
-	text-indent: -99999px;
-	overflow: hidden;
-	background-repeat: no-repeat;
-}
-
-
-/* Misc visuals
-----------------------------------*/
-
-/* Overlays */
-.ui-widget-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-.ui-accordion .ui-accordion-header {
-	display: block;
-	cursor: pointer;
-	position: relative;
-	margin-top: 2px;
-	padding: .5em .5em .5em .7em;
-	min-height: 0; /* support: IE7 */
-}
-.ui-accordion .ui-accordion-icons {
-	padding-left: 2.2em;
-}
-.ui-accordion .ui-accordion-noicons {
-	padding-left: .7em;
-}
-.ui-accordion .ui-accordion-icons .ui-accordion-icons {
-	padding-left: 2.2em;
-}
-.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
-	position: absolute;
-	left: .5em;
-	top: 50%;
-	margin-top: -8px;
-}
-.ui-accordion .ui-accordion-content {
-	padding: 1em 2.2em;
-	border-top: 0;
-	overflow: auto;
-}
-.ui-autocomplete {
-	position: absolute;
-	top: 0;
-	left: 0;
-	cursor: default;
-}
-.ui-button {
-	display: inline-block;
-	position: relative;
-	padding: 0;
-	line-height: normal;
-	margin-right: .1em;
-	cursor: pointer;
-	vertical-align: middle;
-	text-align: center;
-	overflow: visible; /* removes extra width in IE */
-}
-.ui-button,
-.ui-button:link,
-.ui-button:visited,
-.ui-button:hover,
-.ui-button:active {
-	text-decoration: none;
-}
-/* to make room for the icon, a width needs to be set here */
-.ui-button-icon-only {
-	width: 2.2em;
-}
-/* button elements seem to need a little more width */
-button.ui-button-icon-only {
-	width: 2.4em;
-}
-.ui-button-icons-only {
-	width: 3.4em;
-}
-button.ui-button-icons-only {
-	width: 3.7em;
-}
-
-/* button text element */
-.ui-button .ui-button-text {
-	display: block;
-	line-height: normal;
-}
-.ui-button-text-only .ui-button-text {
-	padding: .4em 1em;
-}
-.ui-button-icon-only .ui-button-text,
-.ui-button-icons-only .ui-button-text {
-	padding: .4em;
-	text-indent: -9999999px;
-}
-.ui-button-text-icon-primary .ui-button-text,
-.ui-button-text-icons .ui-button-text {
-	padding: .4em 1em .4em 2.1em;
-}
-.ui-button-text-icon-secondary .ui-button-text,
-.ui-button-text-icons .ui-button-text {
-	padding: .4em 2.1em .4em 1em;
-}
-.ui-button-text-icons .ui-button-text {
-	padding-left: 2.1em;
-	padding-right: 2.1em;
-}
-/* no icon support for input elements, provide padding by default */
-input.ui-button {
-	padding: .4em 1em;
-}
-
-/* button icon element(s) */
-.ui-button-icon-only .ui-icon,
-.ui-button-text-icon-primary .ui-icon,
-.ui-button-text-icon-secondary .ui-icon,
-.ui-button-text-icons .ui-icon,
-.ui-button-icons-only .ui-icon {
-	position: absolute;
-	top: 50%;
-	margin-top: -8px;
-}
-.ui-button-icon-only .ui-icon {
-	left: 50%;
-	margin-left: -8px;
-}
-.ui-button-text-icon-primary .ui-button-icon-primary,
-.ui-button-text-icons .ui-button-icon-primary,
-.ui-button-icons-only .ui-button-icon-primary {
-	left: .5em;
-}
-.ui-button-text-icon-secondary .ui-button-icon-secondary,
-.ui-button-text-icons .ui-button-icon-secondary,
-.ui-button-icons-only .ui-button-icon-secondary {
-	right: .5em;
-}
-
-/* button sets */
-.ui-buttonset {
-	margin-right: 7px;
-}
-.ui-buttonset .ui-button {
-	margin-left: 0;
-	margin-right: -.3em;
-}
-
-/* workarounds */
-/* reset extra padding in Firefox, see h5bp.com/l */
-input.ui-button::-moz-focus-inner,
-button.ui-button::-moz-focus-inner {
-	border: 0;
-	padding: 0;
-}
-.ui-datepicker {
-	width: 17em;
-	padding: .2em .2em 0;
-	display: none;
-}
-.ui-datepicker .ui-datepicker-header {
-	position: relative;
-	padding: .2em 0;
-}
-.ui-datepicker .ui-datepicker-prev,
-.ui-datepicker .ui-datepicker-next {
-	position: absolute;
-	top: 2px;
-	width: 1.8em;
-	height: 1.8em;
-}
-.ui-datepicker .ui-datepicker-prev-hover,
-.ui-datepicker .ui-datepicker-next-hover {
-	top: 1px;
-}
-.ui-datepicker .ui-datepicker-prev {
-	left: 2px;
-}
-.ui-datepicker .ui-datepicker-next {
-	right: 2px;
-}
-.ui-datepicker .ui-datepicker-prev-hover {
-	left: 1px;
-}
-.ui-datepicker .ui-datepicker-next-hover {
-	right: 1px;
-}
-.ui-datepicker .ui-datepicker-prev span,
-.ui-datepicker .ui-datepicker-next span {
-	display: block;
-	position: absolute;
-	left: 50%;
-	margin-left: -8px;
-	top: 50%;
-	margin-top: -8px;
-}
-.ui-datepicker .ui-datepicker-title {
-	margin: 0 2.3em;
-	line-height: 1.8em;
-	text-align: center;
-}
-.ui-datepicker .ui-datepicker-title select {
-	font-size: 1em;
-	margin: 1px 0;
-}
-.ui-datepicker select.ui-datepicker-month-year {
-	width: 100%;
-}
-.ui-datepicker select.ui-datepicker-month,
-.ui-datepicker select.ui-datepicker-year {
-	width: 49%;
-}
-.ui-datepicker table {
-	width: 100%;
-	font-size: .9em;
-	border-collapse: collapse;
-	margin: 0 0 .4em;
-}
-.ui-datepicker th {
-	padding: .7em .3em;
-	text-align: center;
-	font-weight: bold;
-	border: 0;
-}
-.ui-datepicker td {
-	border: 0;
-	padding: 1px;
-}
-.ui-datepicker td span,
-.ui-datepicker td a {
-	display: block;
-	padding: .2em;
-	text-align: right;
-	text-decoration: none;
-}
-.ui-datepicker .ui-datepicker-buttonpane {
-	background-image: none;
-	margin: .7em 0 0 0;
-	padding: 0 .2em;
-	border-left: 0;
-	border-right: 0;
-	border-bottom: 0;
-}
-.ui-datepicker .ui-datepicker-buttonpane button {
-	float: right;
-	margin: .5em .2em .4em;
-	cursor: pointer;
-	padding: .2em .6em .3em .6em;
-	width: auto;
-	overflow: visible;
-}
-.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
-	float: left;
-}
-
-/* with multiple calendars */
-.ui-datepicker.ui-datepicker-multi {
-	width: auto;
-}
-.ui-datepicker-multi .ui-datepicker-group {
-	float: left;
-}
-.ui-datepicker-multi .ui-datepicker-group table {
-	width: 95%;
-	margin: 0 auto .4em;
-}
-.ui-datepicker-multi-2 .ui-datepicker-group {
-	width: 50%;
-}
-.ui-datepicker-multi-3 .ui-datepicker-group {
-	width: 33.3%;
-}
-.ui-datepicker-multi-4 .ui-datepicker-group {
-	width: 25%;
-}
-.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
-.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
-	border-left-width: 0;
-}
-.ui-datepicker-multi .ui-datepicker-buttonpane {
-	clear: left;
-}
-.ui-datepicker-row-break {
-	clear: both;
-	width: 100%;
-	font-size: 0;
-}
-
-/* RTL support */
-.ui-datepicker-rtl {
-	direction: rtl;
-}
-.ui-datepicker-rtl .ui-datepicker-prev {
-	right: 2px;
-	left: auto;
-}
-.ui-datepicker-rtl .ui-datepicker-next {
-	left: 2px;
-	right: auto;
-}
-.ui-datepicker-rtl .ui-datepicker-prev:hover {
-	right: 1px;
-	left: auto;
-}
-.ui-datepicker-rtl .ui-datepicker-next:hover {
-	left: 1px;
-	right: auto;
-}
-.ui-datepicker-rtl .ui-datepicker-buttonpane {
-	clear: right;
-}
-.ui-datepicker-rtl .ui-datepicker-buttonpane button {
-	float: left;
-}
-.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
-.ui-datepicker-rtl .ui-datepicker-group {
-	float: right;
-}
-.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
-.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
-	border-right-width: 0;
-	border-left-width: 1px;
-}
-.ui-dialog {
-	position: absolute;
-	top: 0;
-	left: 0;
-	padding: .2em;
-	outline: 0;
-}
-.ui-dialog .ui-dialog-titlebar {
-	padding: .4em 1em;
-	position: relative;
-}
-.ui-dialog .ui-dialog-title {
-	float: left;
-	margin: .1em 0;
-	white-space: nowrap;
-	width: 90%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-.ui-dialog .ui-dialog-titlebar-close {
-	position: absolute;
-	right: .3em;
-	top: 50%;
-	width: 21px;
-	margin: -10px 0 0 0;
-	padding: 1px;
-	height: 20px;
-}
-.ui-dialog .ui-dialog-content {
-	position: relative;
-	border: 0;
-	padding: .5em 1em;
-	background: none;
-	overflow: auto;
-}
-.ui-dialog .ui-dialog-buttonpane {
-	text-align: left;
-	border-width: 1px 0 0 0;
-	background-image: none;
-	margin-top: .5em;
-	padding: .3em 1em .5em .4em;
-}
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
-	float: right;
-}
-.ui-dialog .ui-dialog-buttonpane button {
-	margin: .5em .4em .5em 0;
-	cursor: pointer;
-}
-.ui-dialog .ui-resizable-se {
-	width: 12px;
-	height: 12px;
-	right: -5px;
-	bottom: -5px;
-	background-position: 16px 16px;
-}
-.ui-draggable .ui-dialog-titlebar {
-	cursor: move;
-}
-.ui-menu {
-	list-style: none;
-	padding: 2px;
-	margin: 0;
-	display: block;
-	outline: none;
-}
-.ui-menu .ui-menu {
-	margin-top: -3px;
-	position: absolute;
-}
-.ui-menu .ui-menu-item {
-	margin: 0;
-	padding: 0;
-	width: 100%;
-}
-.ui-menu .ui-menu-divider {
-	margin: 5px -2px 5px -2px;
-	height: 0;
-	font-size: 0;
-	line-height: 0;
-	border-width: 1px 0 0 0;
-}
-.ui-menu .ui-menu-item a {
-	text-decoration: none;
-	display: block;
-	padding: 2px .4em;
-	line-height: 1.5;
-	min-height: 0; /* support: IE7 */
-	font-weight: normal;
-}
-.ui-menu .ui-menu-item a.ui-state-focus,
-.ui-menu .ui-menu-item a.ui-state-active {
-	font-weight: normal;
-	margin: -1px;
-}
-
-.ui-menu .ui-state-disabled {
-	font-weight: normal;
-	margin: .4em 0 .2em;
-	line-height: 1.5;
-}
-.ui-menu .ui-state-disabled a {
-	cursor: default;
-}
-
-/* icon support */
-.ui-menu-icons {
-	position: relative;
-}
-.ui-menu-icons .ui-menu-item a {
-	position: relative;
-	padding-left: 2em;
-}
-
-/* left-aligned */
-.ui-menu .ui-icon {
-	position: absolute;
-	top: .2em;
-	left: .2em;
-}
-
-/* right-aligned */
-.ui-menu .ui-menu-icon {
-	position: static;
-	float: right;
-}
-.ui-progressbar {
-	height: 2em;
-	text-align: left;
-	overflow: hidden;
-}
-.ui-progressbar .ui-progressbar-value {
-	margin: -1px;
-	height: 100%;
-}
-.ui-progressbar .ui-progressbar-overlay {
-	background: url("images/animated-overlay.gif");
-	height: 100%;
-	filter: alpha(opacity=25);
-	opacity: 0.25;
-}
-.ui-progressbar-indeterminate .ui-progressbar-value {
-	background-image: none;
-}
-.ui-resizable {
-	position: relative;
-}
-.ui-resizable-handle {
-	position: absolute;
-	font-size: 0.1px;
-	display: block;
-}
-.ui-resizable-disabled .ui-resizable-handle,
-.ui-resizable-autohide .ui-resizable-handle {
-	display: none;
-}
-.ui-resizable-n {
-	cursor: n-resize;
-	height: 7px;
-	width: 100%;
-	top: -5px;
-	left: 0;
-}
-.ui-resizable-s {
-	cursor: s-resize;
-	height: 7px;
-	width: 100%;
-	bottom: -5px;
-	left: 0;
-}
-.ui-resizable-e {
-	cursor: e-resize;
-	width: 7px;
-	right: -5px;
-	top: 0;
-	height: 100%;
-}
-.ui-resizable-w {
-	cursor: w-resize;
-	width: 7px;
-	left: -5px;
-	top: 0;
-	height: 100%;
-}
-.ui-resizable-se {
-	cursor: se-resize;
-	width: 12px;
-	height: 12px;
-	right: 1px;
-	bottom: 1px;
-}
-.ui-resizable-sw {
-	cursor: sw-resize;
-	width: 9px;
-	height: 9px;
-	left: -5px;
-	bottom: -5px;
-}
-.ui-resizable-nw {
-	cursor: nw-resize;
-	width: 9px;
-	height: 9px;
-	left: -5px;
-	top: -5px;
-}
-.ui-resizable-ne {
-	cursor: ne-resize;
-	width: 9px;
-	height: 9px;
-	right: -5px;
-	top: -5px;
-}
-.ui-selectable-helper {
-	position: absolute;
-	z-index: 100;
-	border: 1px dotted black;
-}
-.ui-slider {
-	position: relative;
-	text-align: left;
-}
-.ui-slider .ui-slider-handle {
-	position: absolute;
-	z-index: 2;
-	width: 1.2em;
-	height: 1.2em;
-	cursor: default;
-}
-.ui-slider .ui-slider-range {
-	position: absolute;
-	z-index: 1;
-	font-size: .7em;
-	display: block;
-	border: 0;
-	background-position: 0 0;
-}
-
-/* For IE8 - See #6727 */
-.ui-slider.ui-state-disabled .ui-slider-handle,
-.ui-slider.ui-state-disabled .ui-slider-range {
-	filter: inherit;
-}
-
-.ui-slider-horizontal {
-	height: .8em;
-}
-.ui-slider-horizontal .ui-slider-handle {
-	top: -.3em;
-	margin-left: -.6em;
-}
-.ui-slider-horizontal .ui-slider-range {
-	top: 0;
-	height: 100%;
-}
-.ui-slider-horizontal .ui-slider-range-min {
-	left: 0;
-}
-.ui-slider-horizontal .ui-slider-range-max {
-	right: 0;
-}
-
-.ui-slider-vertical {
-	width: .8em;
-	height: 100px;
-}
-.ui-slider-vertical .ui-slider-handle {
-	left: -.3em;
-	margin-left: 0;
-	margin-bottom: -.6em;
-}
-.ui-slider-vertical .ui-slider-range {
-	left: 0;
-	width: 100%;
-}
-.ui-slider-vertical .ui-slider-range-min {
-	bottom: 0;
-}
-.ui-slider-vertical .ui-slider-range-max {
-	top: 0;
-}
-.ui-spinner {
-	position: relative;
-	display: inline-block;
-	overflow: hidden;
-	padding: 0;
-	vertical-align: middle;
-}
-.ui-spinner-input {
-	border: none;
-	background: none;
-	color: inherit;
-	padding: 0;
-	margin: .2em 0;
-	vertical-align: middle;
-	margin-left: .4em;
-	margin-right: 22px;
-}
-.ui-spinner-button {
-	width: 16px;
-	height: 50%;
-	font-size: .5em;
-	padding: 0;
-	margin: 0;
-	text-align: center;
-	position: absolute;
-	cursor: default;
-	display: block;
-	overflow: hidden;
-	right: 0;
-}
-/* more specificity required here to overide default borders */
-.ui-spinner a.ui-spinner-button {
-	border-top: none;
-	border-bottom: none;
-	border-right: none;
-}
-/* vertical centre icon */
-.ui-spinner .ui-icon {
-	position: absolute;
-	margin-top: -8px;
-	top: 50%;
-	left: 0;
-}
-.ui-spinner-up {
-	top: 0;
-}
-.ui-spinner-down {
-	bottom: 0;
-}
-
-/* TR overrides */
-.ui-spinner .ui-icon-triangle-1-s {
-	/* need to fix icons sprite */
-	background-position: -65px -16px;
-}
-.ui-tabs {
-	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
-	padding: .2em;
-}
-.ui-tabs .ui-tabs-nav {
-	margin: 0;
-	padding: .2em .2em 0;
-}
-.ui-tabs .ui-tabs-nav li {
-	list-style: none;
-	float: left;
-	position: relative;
-	top: 0;
-	margin: 1px .2em 0 0;
-	border-bottom: 0;
-	padding: 0;
-	white-space: nowrap;
-}
-.ui-tabs .ui-tabs-nav li a {
-	float: left;
-	padding: .5em 1em;
-	text-decoration: none;
-}
-.ui-tabs .ui-tabs-nav li.ui-tabs-active {
-	margin-bottom: -1px;
-	padding-bottom: 1px;
-}
-.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
-.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
-.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
-	cursor: text;
-}
-.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
-.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
-	cursor: pointer;
-}
-.ui-tabs .ui-tabs-panel {
-	display: block;
-	border-width: 0;
-	padding: 1em 1.4em;
-	background: none;
-}
-.ui-tooltip {
-	padding: 8px;
-	position: absolute;
-	z-index: 9999;
-	max-width: 300px;
-	-webkit-box-shadow: 0 0 5px #aaa;
-	box-shadow: 0 0 5px #aaa;
-}
-body .ui-tooltip {
-	border-width: 2px;
-}
-
-/* Component containers
-----------------------------------*/
-.ui-widget {
-	font-family: Helvetica,Arial,sans-serif;
-	font-size: 1.1em;
-}
-.ui-widget .ui-widget {
-	font-size: 1em;
-}
-.ui-widget input,
-.ui-widget select,
-.ui-widget textarea,
-.ui-widget button {
-	font-family: Helvetica,Arial,sans-serif;
-	font-size: 1em;
-}
-.ui-widget-content {
-	border: 1px solid #dddddd;
-	background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
-	color: #444444;
-}
-.ui-widget-content a {
-	color: #444444;
-}
-.ui-widget-header {
-	border: 1px solid #dddddd;
-	background: #dddddd url(images/ui-bg_highlight-soft_50_dddddd_1x100.png) 50% 50% repeat-x;
-	color: #444444;
-	font-weight: bold;
-}
-.ui-widget-header a {
-	color: #444444;
-}
-
-/* Interaction states
-----------------------------------*/
-.ui-state-default,
-.ui-widget-content .ui-state-default,
-.ui-widget-header .ui-state-default {
-	border: 1px solid #dddddd;
-	background: #f6f6f6 url(images/ui-bg_highlight-soft_100_f6f6f6_1x100.png) 50% 50% repeat-x;
-	font-weight: bold;
-	color: #0073ea;
-}
-.ui-state-default a,
-.ui-state-default a:link,
-.ui-state-default a:visited {
-	color: #0073ea;
-	text-decoration: none;
-}
-.ui-state-hover,
-.ui-widget-content .ui-state-hover,
-.ui-widget-header .ui-state-hover,
-.ui-state-focus,
-.ui-widget-content .ui-state-focus,
-.ui-widget-header .ui-state-focus {
-	border: 1px solid #0073ea;
-	background: #0073ea url(images/ui-bg_highlight-soft_25_0073ea_1x100.png) 50% 50% repeat-x;
-	font-weight: bold;
-	color: #ffffff;
-}
-.ui-state-hover a,
-.ui-state-hover a:hover,
-.ui-state-hover a:link,
-.ui-state-hover a:visited {
-	color: #ffffff;
-	text-decoration: none;
-}
-.ui-state-active,
-.ui-widget-content .ui-state-active,
-.ui-widget-header .ui-state-active {
-	border: 1px solid #dddddd;
-	background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
-	font-weight: bold;
-	color: #ff0084;
-}
-.ui-state-active a,
-.ui-state-active a:link,
-.ui-state-active a:visited {
-	color: #ff0084;
-	text-decoration: none;
-}
-
-/* Interaction Cues
-----------------------------------*/
-.ui-state-highlight,
-.ui-widget-content .ui-state-highlight,
-.ui-widget-header .ui-state-highlight {
-	border: 1px solid #cccccc;
-	background: #ffffff url(images/ui-bg_flat_55_ffffff_40x100.png) 50% 50% repeat-x;
-	color: #444444;
-}
-.ui-state-highlight a,
-.ui-widget-content .ui-state-highlight a,
-.ui-widget-header .ui-state-highlight a {
-	color: #444444;
-}
-.ui-state-error,
-.ui-widget-content .ui-state-error,
-.ui-widget-header .ui-state-error {
-	border: 1px solid #ff0084;
-	background: #ffffff url(images/ui-bg_flat_55_ffffff_40x100.png) 50% 50% repeat-x;
-	color: #222222;
-}
-.ui-state-error a,
-.ui-widget-content .ui-state-error a,
-.ui-widget-header .ui-state-error a {
-	color: #222222;
-}
-.ui-state-error-text,
-.ui-widget-content .ui-state-error-text,
-.ui-widget-header .ui-state-error-text {
-	color: #222222;
-}
-.ui-priority-primary,
-.ui-widget-content .ui-priority-primary,
-.ui-widget-header .ui-priority-primary {
-	font-weight: bold;
-}
-.ui-priority-secondary,
-.ui-widget-content .ui-priority-secondary,
-.ui-widget-header .ui-priority-secondary {
-	opacity: .7;
-	filter:Alpha(Opacity=70);
-	font-weight: normal;
-}
-.ui-state-disabled,
-.ui-widget-content .ui-state-disabled,
-.ui-widget-header .ui-state-disabled {
-	opacity: .35;
-	filter:Alpha(Opacity=35);
-	background-image: none;
-}
-.ui-state-disabled .ui-icon {
-	filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
-}
-
-/* Icons
-----------------------------------*/
-
-/* states and images */
-.ui-icon {
-	width: 16px;
-	height: 16px;
-	background-position: 16px 16px;
-}
-.ui-icon,
-.ui-widget-content .ui-icon {
-	background-image: url(images/ui-icons_ff0084_256x240.png);
-}
-.ui-widget-header .ui-icon {
-	background-image: url(images/ui-icons_0073ea_256x240.png);
-}
-.ui-state-default .ui-icon {
-	background-image: url(images/ui-icons_666666_256x240.png);
-}
-.ui-state-hover .ui-icon,
-.ui-state-focus .ui-icon {
-	background-image: url(images/ui-icons_ffffff_256x240.png);
-}
-.ui-state-active .ui-icon {
-	background-image: url(images/ui-icons_454545_256x240.png);
-}
-.ui-state-highlight .ui-icon {
-	background-image: url(images/ui-icons_0073ea_256x240.png);
-}
-.ui-state-error .ui-icon,
-.ui-state-error-text .ui-icon {
-	background-image: url(images/ui-icons_ff0084_256x240.png);
-}
-
-/* positioning */
-.ui-icon-carat-1-n { background-position: 0 0; }
-.ui-icon-carat-1-ne { background-position: -16px 0; }
-.ui-icon-carat-1-e { background-position: -32px 0; }
-.ui-icon-carat-1-se { background-position: -48px 0; }
-.ui-icon-carat-1-s { background-position: -64px 0; }
-.ui-icon-carat-1-sw { background-position: -80px 0; }
-.ui-icon-carat-1-w { background-position: -96px 0; }
-.ui-icon-carat-1-nw { background-position: -112px 0; }
-.ui-icon-carat-2-n-s { background-position: -128px 0; }
-.ui-icon-carat-2-e-w { background-position: -144px 0; }
-.ui-icon-triangle-1-n { background-position: 0 -16px; }
-.ui-icon-triangle-1-ne { background-position: -16px -16px; }
-.ui-icon-triangle-1-e { background-position: -32px -16px; }
-.ui-icon-triangle-1-se { background-position: -48px -16px; }
-.ui-icon-triangle-1-s { background-position: -64px -16px; }
-.ui-icon-triangle-1-sw { background-position: -80px -16px; }
-.ui-icon-triangle-1-w { background-position: -96px -16px; }
-.ui-icon-triangle-1-nw { background-position: -112px -16px; }
-.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
-.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
-.ui-icon-arrow-1-n { background-position: 0 -32px; }
-.ui-icon-arrow-1-ne { background-position: -16px -32px; }
-.ui-icon-arrow-1-e { background-position: -32px -32px; }
-.ui-icon-arrow-1-se { background-position: -48px -32px; }
-.ui-icon-arrow-1-s { background-position: -64px -32px; }
-.ui-icon-arrow-1-sw { background-position: -80px -32px; }
-.ui-icon-arrow-1-w { background-position: -96px -32px; }
-.ui-icon-arrow-1-nw { background-position: -112px -32px; }
-.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
-.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
-.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
-.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
-.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
-.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
-.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
-.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
-.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
-.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
-.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
-.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
-.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
-.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
-.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
-.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
-.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
-.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
-.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
-.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
-.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
-.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
-.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
-.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
-.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
-.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
-.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
-.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
-.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
-.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
-.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
-.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
-.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
-.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
-.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
-.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
-.ui-icon-arrow-4 { background-position: 0 -80px; }
-.ui-icon-arrow-4-diag { background-position: -16px -80px; }
-.ui-icon-extlink { background-position: -32px -80px; }
-.ui-icon-newwin { background-position: -48px -80px; }
-.ui-icon-refresh { background-position: -64px -80px; }
-.ui-icon-shuffle { background-position: -80px -80px; }
-.ui-icon-transfer-e-w { background-position: -96px -80px; }
-.ui-icon-transferthick-e-w { background-position: -112px -80px; }
-.ui-icon-folder-collapsed { background-position: 0 -96px; }
-.ui-icon-folder-open { background-position: -16px -96px; }
-.ui-icon-document { background-position: -32px -96px; }
-.ui-icon-document-b { background-position: -48px -96px; }
-.ui-icon-note { background-position: -64px -96px; }
-.ui-icon-mail-closed { background-position: -80px -96px; }
-.ui-icon-mail-open { background-position: -96px -96px; }
-.ui-icon-suitcase { background-position: -112px -96px; }
-.ui-icon-comment { background-position: -128px -96px; }
-.ui-icon-person { background-position: -144px -96px; }
-.ui-icon-print { background-position: -160px -96px; }
-.ui-icon-trash { background-position: -176px -96px; }
-.ui-icon-locked { background-position: -192px -96px; }
-.ui-icon-unlocked { background-position: -208px -96px; }
-.ui-icon-bookmark { background-position: -224px -96px; }
-.ui-icon-tag { background-position: -240px -96px; }
-.ui-icon-home { background-position: 0 -112px; }
-.ui-icon-flag { background-position: -16px -112px; }
-.ui-icon-calendar { background-position: -32px -112px; }
-.ui-icon-cart { background-position: -48px -112px; }
-.ui-icon-pencil { background-position: -64px -112px; }
-.ui-icon-clock { background-position: -80px -112px; }
-.ui-icon-disk { background-position: -96px -112px; }
-.ui-icon-calculator { background-position: -112px -112px; }
-.ui-icon-zoomin { background-position: -128px -112px; }
-.ui-icon-zoomout { background-position: -144px -112px; }
-.ui-icon-search { background-position: -160px -112px; }
-.ui-icon-wrench { background-position: -176px -112px; }
-.ui-icon-gear { background-position: -192px -112px; }
-.ui-icon-heart { background-position: -208px -112px; }
-.ui-icon-star { background-position: -224px -112px; }
-.ui-icon-link { background-position: -240px -112px; }
-.ui-icon-cancel { background-position: 0 -128px; }
-.ui-icon-plus { background-position: -16px -128px; }
-.ui-icon-plusthick { background-position: -32px -128px; }
-.ui-icon-minus { background-position: -48px -128px; }
-.ui-icon-minusthick { background-position: -64px -128px; }
-.ui-icon-close { background-position: -80px -128px; }
-.ui-icon-closethick { background-position: -96px -128px; }
-.ui-icon-key { background-position: -112px -128px; }
-.ui-icon-lightbulb { background-position: -128px -128px; }
-.ui-icon-scissors { background-position: -144px -128px; }
-.ui-icon-clipboard { background-position: -160px -128px; }
-.ui-icon-copy { background-position: -176px -128px; }
-.ui-icon-contact { background-position: -192px -128px; }
-.ui-icon-image { background-position: -208px -128px; }
-.ui-icon-video { background-position: -224px -128px; }
-.ui-icon-script { background-position: -240px -128px; }
-.ui-icon-alert { background-position: 0 -144px; }
-.ui-icon-info { background-position: -16px -144px; }
-.ui-icon-notice { background-position: -32px -144px; }
-.ui-icon-help { background-position: -48px -144px; }
-.ui-icon-check { background-position: -64px -144px; }
-.ui-icon-bullet { background-position: -80px -144px; }
-.ui-icon-radio-on { background-position: -96px -144px; }
-.ui-icon-radio-off { background-position: -112px -144px; }
-.ui-icon-pin-w { background-position: -128px -144px; }
-.ui-icon-pin-s { background-position: -144px -144px; }
-.ui-icon-play { background-position: 0 -160px; }
-.ui-icon-pause { background-position: -16px -160px; }
-.ui-icon-seek-next { background-position: -32px -160px; }
-.ui-icon-seek-prev { background-position: -48px -160px; }
-.ui-icon-seek-end { background-position: -64px -160px; }
-.ui-icon-seek-start { background-position: -80px -160px; }
-/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
-.ui-icon-seek-first { background-position: -80px -160px; }
-.ui-icon-stop { background-position: -96px -160px; }
-.ui-icon-eject { background-position: -112px -160px; }
-.ui-icon-volume-off { background-position: -128px -160px; }
-.ui-icon-volume-on { background-position: -144px -160px; }
-.ui-icon-power { background-position: 0 -176px; }
-.ui-icon-signal-diag { background-position: -16px -176px; }
-.ui-icon-signal { background-position: -32px -176px; }
-.ui-icon-battery-0 { background-position: -48px -176px; }
-.ui-icon-battery-1 { background-position: -64px -176px; }
-.ui-icon-battery-2 { background-position: -80px -176px; }
-.ui-icon-battery-3 { background-position: -96px -176px; }
-.ui-icon-circle-plus { background-position: 0 -192px; }
-.ui-icon-circle-minus { background-position: -16px -192px; }
-.ui-icon-circle-close { background-position: -32px -192px; }
-.ui-icon-circle-triangle-e { background-position: -48px -192px; }
-.ui-icon-circle-triangle-s { background-position: -64px -192px; }
-.ui-icon-circle-triangle-w { background-position: -80px -192px; }
-.ui-icon-circle-triangle-n { background-position: -96px -192px; }
-.ui-icon-circle-arrow-e { background-position: -112px -192px; }
-.ui-icon-circle-arrow-s { background-position: -128px -192px; }
-.ui-icon-circle-arrow-w { background-position: -144px -192px; }
-.ui-icon-circle-arrow-n { background-position: -160px -192px; }
-.ui-icon-circle-zoomin { background-position: -176px -192px; }
-.ui-icon-circle-zoomout { background-position: -192px -192px; }
-.ui-icon-circle-check { background-position: -208px -192px; }
-.ui-icon-circlesmall-plus { background-position: 0 -208px; }
-.ui-icon-circlesmall-minus { background-position: -16px -208px; }
-.ui-icon-circlesmall-close { background-position: -32px -208px; }
-.ui-icon-squaresmall-plus { background-position: -48px -208px; }
-.ui-icon-squaresmall-minus { background-position: -64px -208px; }
-.ui-icon-squaresmall-close { background-position: -80px -208px; }
-.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
-.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
-.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
-.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
-.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
-.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
-
-
-/* Misc visuals
-----------------------------------*/
-
-/* Corner radius */
-.ui-corner-all,
-.ui-corner-top,
-.ui-corner-left,
-.ui-corner-tl {
-	border-top-left-radius: 2px;
-}
-.ui-corner-all,
-.ui-corner-top,
-.ui-corner-right,
-.ui-corner-tr {
-	border-top-right-radius: 2px;
-}
-.ui-corner-all,
-.ui-corner-bottom,
-.ui-corner-left,
-.ui-corner-bl {
-	border-bottom-left-radius: 2px;
-}
-.ui-corner-all,
-.ui-corner-bottom,
-.ui-corner-right,
-.ui-corner-br {
-	border-bottom-right-radius: 2px;
-}
-
-/* Overlays */
-.ui-widget-overlay {
-	background: #eeeeee url(images/ui-bg_flat_0_eeeeee_40x100.png) 50% 50% repeat-x;
-	opacity: .8;
-	filter: Alpha(Opacity=80);
-}
-.ui-widget-shadow {
-	margin: -4px 0 0 -4px;
-	padding: 4px;
-	background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
-	opacity: .6;
-	filter: Alpha(Opacity=60);
-	border-radius: 0px;
-}
--- a/src/egonomy/static/egonomy/css/jquery.tagit.css	Wed Jun 26 11:24:48 2013 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,62 +0,0 @@
-ul.tagit {
-    padding: 1px 5px;
-    overflow: auto;
-    margin-left: inherit; /* usually we don't want the regular ul margins. */
-    margin-right: inherit;
-}
-ul.tagit li {
-    display: block;
-    float: left;
-    margin: 2px 5px 2px 0;
-}
-ul.tagit li.tagit-choice {    
-    position: relative;
-    line-height: inherit;
-}
-
-ul.tagit li.tagit-choice-read-only { 
-    padding: .2em .5em .2em .5em; 
-} 
-
-ul.tagit li.tagit-choice-editable { 
-    padding: .2em 18px .2em .5em; 
-} 
-
-ul.tagit li.tagit-new {
-    padding: .25em 4px .25em 0;
-}
-
-ul.tagit li.tagit-choice a.tagit-label {
-    cursor: pointer;
-    text-decoration: none;
-}
-ul.tagit li.tagit-choice .tagit-close {
-    cursor: pointer;
-    position: absolute;
-    right: .1em;
-    top: 50%;
-    margin-top: -8px;
-}
-
-/* used for some custom themes that don't need image icons */
-ul.tagit li.tagit-choice .tagit-close .text-icon {
-    display: none;
-}
-
-ul.tagit li.tagit-choice input {
-    display: block;
-    float: left;
-    margin: 2px 5px 2px 0;
-}
-ul.tagit input[type="text"] {
-    -moz-box-sizing:    border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing:         border-box;
-
-    border: none;
-    margin: 0;
-    padding: 0;
-    width: inherit;
-    background-color: inherit;
-    outline: none;
-}
--- a/src/egonomy/static/egonomy/css/slideshow.css	Wed Jun 26 11:24:48 2013 +0200
+++ b/src/egonomy/static/egonomy/css/slideshow.css	Wed Jun 26 11:25:08 2013 +0200
@@ -1,7 +1,19 @@
-.slideshow-wrap, .imagezone {
+body {
+    overflow: hidden;
+}
+
+.slideshow-wrap {
     position: absolute; left: 0; top: 0; width: 100%; height: 100%;
 }
 
+.backdrop {
+    position: absolute; opacity: .3; -webkit-filter: blur(5px); filter: blur(5px);
+}
+
+.main-image {
+    position: absolute; top: 50px; right: 50px;
+}
+
 .caption-wrap {
     position: absolute; left: 50px; right: 50px; bottom: 50px;
 }
@@ -12,6 +24,10 @@
     padding: 16px 0; margin: 0;
 }
 
+.main-image, .caption {
+    box-shadow: 4px 4px 2px rgba(0,0,0,.5);
+}
+
 .caption h2 {
     font-size: 18px; font-weight: bold; margin: 0; padding: 0 20px 5px;
 }
--- a/src/egonomy/static/egonomy/css/style.css	Wed Jun 26 11:24:48 2013 +0200
+++ b/src/egonomy/static/egonomy/css/style.css	Wed Jun 26 11:25:08 2013 +0200
@@ -3,7 +3,7 @@
 .wrap{width: 950px; margin: 0 auto; }
 .uppercase{text-transform: uppercase;}
 .fragment{width: 225px; height: 225px;}
-.va-top{vertical-align: top;}
+.va-top{vertical-align: top;padding-top: 4px;}
 header, footer{width:100%;background: url(../img/border-bottom-header.png) center bottom no-repeat;}
 footer{margin-bottom: 60px;background-position: top center; padding-top: 20px;font-size: 15px; font-family: 'Lato'; font-weight: 300;}
 footer h6{float: left;}
@@ -39,6 +39,15 @@
 .title-menu{ position: absolute; bottom: 0; right: 0;}
 .title-menu li{float: left;}
 
+.edition-table-left{
+    width: 700px !important;
+    float: left;
+}
+.edition-table-right{
+    text-align: right;
+    width: 180px !important;
+    float: right;
+}
 .bar-tools{margin-bottom: 12px; line-height: 35px; padding-bottom: 1px; font-family: 'Lato'; font-weight: 300; display:block;background-image: url(../img/border-bar-tools.png), url(../img/border-bar-tools.png); background-position: top center, bottom center; background-repeat: repeat-x;}
 .bar-tools h3{ font-size: 18px;  display: inline-block; text-transform: uppercase;}
 .bar-tools ul{float: right;}
@@ -58,7 +67,7 @@
 a.icon.plus{background-image: url(../img/icon-plus-15.png);}
 a.icon.edit{background-image: url(../img/icon-pencil-15.png);}
 a.icon.trash{background-image: url(../img/icon-trash-15.png);}
-
+a.icon.copy{background-image: url(../img/icon-copy-15.png);}
 /* Home */
 .w650{width: 650px;}
 .our-images{margin-bottom: 38px; text-align: center; font-size: 12px; font-family: 'Lato'; font-weight : bold; font-style : italic; color: #58595A;}
@@ -164,9 +173,18 @@
 .popin .buttons{text-align: right;}
 .btn{cursor:pointer; border: none; vertical-align:middle; display: inline-block; color: #FFF; font-size: 12px; font-family: 'Lato'; height: 25px; line-height: 25px; padding: 0 12px; background-color: #666;}
 .block{display: block;}
-.popin-wrap, .popin{display: none;}
+
 .big-popin{width: 572px; margin-left: -286px;}
-
+.popin th{ vertical-align:middle;font-family: 'Lato'; font-size: 12px; font-weight: 300; width: 110px; text-align: left;}
+.popin .col-left{width: 316px; float: left; padding-left: 12px;}
+.w-192{width: 192px; margin: 0 !important;}
+.popin .col-left input[type=text]{width: 172px;}
+.no-margin{margin: 0 !important;}
+.big-popin table{border-spacing:0 5px;border-collapse:separate;}
+.big-popin textarea{width: 304px; max-width: 304px; height: 170px;}
+.list-projets-2.in-popin{float: right; display: inline-block; padding-right: 12px;}
+.list-projets-2.in-popin li{margin: 0;}
+.big-popin .buttons{clear: both; border-top: 1px solid #DDD; padding-top: 10px; padding-right: 12px;}
 .edition{background-color: #eee; padding: 0 28px; margin-bottom: 64px;}
 .edition .slideshow{ min-height: 80px; position:relative; padding: 24px 0;  text-align: center;}
 .slideshow .arrow-wrap{display: block;}
@@ -176,6 +194,12 @@
 .slideshow .share li{float: left; margin-left: 8px;}
 .image-wrap{display: inline-block;}
 .edition{font-family: 'Lato'; font-size: 14px; text-align: left;}
+.big-popin form{padding: 8px 0 20px 0;}
+
+
+.popin-wrap, .popin{display: none;}
+
+
 
 .edition th{color: #777; min-width: 140px; }
 .edition td{width:100%;color: #000; line-height: 16px;}
@@ -198,7 +222,7 @@
 .box-edition:last-child{border-bottom: none;}
 .edition input[type=text], .edition textarea{border: 1px solid #CACACA;}
 .edition textarea{width:100%; max-width: 754px;}
-.edition input[type=text]{height: 23px; line-height: 23px; padding: 0 6px;}
+.edition input[type=text]{width: 742px; height: 23px; line-height: 23px; padding: 0 6px;}
 .no-before:before{content:"" ; display: block;}
 .tagit{font-family: 'Lato' !important;}
 .ui-corner-all{-webkit-border-radius : 0 !important;-moz-border-radius : 0 !important;border-radius : 0 !important;}
@@ -239,9 +263,14 @@
 .content-project{background-color: #eee;}
 .content-project p{font-family: 'Lato'; font-size: 13px; font-weight: 300; line-height: 15px; padding: 10px;}
 
+body{overflow: auto !important;}
 
 
 /* imported */
+.square-fragment-110 {
+    height: 110px;
+    width: 110px;
+}
 .square-fragment-225 {
     height: 225px;
     width: 225px;
@@ -283,6 +312,13 @@
 .image-and-fragment svg, .cutout-canvas {
     position: absolute; top: 0; left: 0; width: 100%; height: 100%;
 }
+.sub_svg_image {
+    opacity: .3;
+}
+.sub_svg_image:hover {
+    opacity: 1;
+}
+/* search highlight */
 .highlight {
     background: #ffff80;
 }
--- a/src/egonomy/static/egonomy/css/tagit.ui-zendesk.css	Wed Jun 26 11:24:48 2013 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,50 +0,0 @@
-
-/* Optional scoped theme for tag-it which mimics the zendesk widget. 
-   Modified by TC for IRI */
-
-
-ul.tagit {
-    border: 1px solid #6699FF; background: #FFFFFF;
-}
-ul.tagit li.tagit-choice {
-    -moz-border-radius: 6px;
-    border-radius: 6px;
-    -webkit-border-radius: 6px;
-    border: 1px solid #CAD8F3;
-
-    background: none;
-    background-color: #DEE7F8;
-
-    color: #555;
-    font-weight: normal;
-}
-ul.tagit li.tagit-choice a.tagit-close {
-    text-decoration: none;
-}
-ul.tagit li.tagit-choice .tagit-close {
-    right: .4em;
-}
-ul.tagit li.tagit-choice .ui-icon {
-    display: none;
-}
-ul.tagit li.tagit-choice .tagit-close .text-icon {
-    display: inline;
-    font-family: arial, sans-serif;
-    font-size: 16px;
-    line-height: 16px;
-    color: #777;
-}
-ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove {
-    background-color: #bbcef1;
-    border-color: #6d95e0;
-}
-ul.tagit li.tagit-choice a.tagLabel:hover,
-ul.tagit li.tagit-choice a.tagit-close .text-icon:hover {
-    color: #222;
-}
-ul.tagit input[type="text"] {
-    color: #333333;
-    background: none;
-}
- 
-
Binary file src/egonomy/static/egonomy/img/arrow-select.png has changed
Binary file src/egonomy/static/egonomy/img/icon-copy-15.png has changed
--- a/src/egonomy/static/egonomy/js/main.js	Wed Jun 26 11:24:48 2013 +0200
+++ b/src/egonomy/static/egonomy/js/main.js	Wed Jun 26 11:25:08 2013 +0200
@@ -1,11 +1,34 @@
 $(function(){
+//filters
+	$('.filters a').each(function(){
+		var text = $.trim($(this).text());
+		if(text.length > 30){
+			$(this).text(text.substr(0, 30) + '...')
+		}
+	});
 //masonry
-	var container = $('.list-projets-3');
-	container.masonry({
+	var masonry465 = $('.masonry-465');
+	masonry465.masonry({
 	  columnWidth: 465,
-	  itemSelector: '.item',
+	  itemSelector: '.item-masonry',
 	  gutter : 20
 	});
+
+	var masonry225 = $('.masonry-225');
+	masonry225.masonry({
+	  columnWidth: 225,
+	  itemSelector: '.item-masonry',
+	  gutter : 16
+	});
+
+	function masonry177(){
+		var masonry177 = $('.masonry-177');
+		masonry177.masonry({
+		  columnWidth: 177,
+		  itemSelector: '.item-masonry'
+		});
+	}
+	masonry177();
 //popin
 	$('.open-popin').bind('click', function(e){
 		e.preventDefault();
@@ -27,14 +50,74 @@
 		e.stopPropagation();
 	});
 //tag it
-	var keywordsTagIt = $('.tag-it').tagit({
-		allowSpaces : true
+	if($('.tag-it').length){
+		var keywordsTagIt = $('.tag-it').tagit({
+			allowSpaces : true
+		});
+		$('.list-key-add a').bind('click', function(e){
+			e.preventDefault();
+			var tag = $(this).attr('data-tag');
+			keywordsTagIt.tagit("createTag", tag);
+		});
+	}
+//mosaic
+	$('.toggle-comment').bind('click', function(e){
+		e.preventDefault();
+		$('.show-comment, .hide-comment').hide();
+		if($('.mosaic').length){
+			$('.mosaic').removeClass('mosaic').addClass('mosaic-comment');
+			$('.hide-comment').show();
+		}else{
+			$('.mosaic-comment').removeClass('mosaic-comment').addClass('mosaic');
+			$('.show-comment').show();
+		}
+		masonry177();
 	});
-	$('.list-key-add a').bind('click', function(e){
+
+	$('.display-keyword').bind('click', function(e){
 		e.preventDefault();
-		var tag = $(this).attr('data-tag');
-		keywordsTagIt.tagit("createTag", tag);
+		var ul = $(this).parents('ul'),
+			li = $(this).parents('li'),
+			iconAction = li.find('.icon-action'),
+			index = li.index(),
+			keyword = $(this).attr('data-keyword');
+		enabledDisplayKeyword(li, keyword, iconAction);
+
+		ul.find('li').each(function(k, v){
+			if(index != k){
+				var displayKeyword = $(v).find('.display-keyword'),
+					iconAction = $(v).find('.icon-action'),
+					keyword = displayKeyword.attr('data-keyword');
+				disabledDisplayKeyword($(v), keyword, iconAction);
+			}
+		});
+	});
+	$('.icon-action').bind('click', function(e){
+		e.preventDefault();
+		var li = $(this).parents('li');
+		toggleDisplayKeyword(li);
 	});
-	
+	function toggleDisplayKeyword(li){
+		var displayKeyword = li.find('.display-keyword'),
+			iconAction = li.find('.icon-action'),
+			keyword = displayKeyword.attr('data-keyword');
+		if(li.hasClass('disabled')){
+			enabledDisplayKeyword(li, keyword, iconAction);
+		}else{
+			disabledDisplayKeyword(li, keyword, iconAction);
+		}
+	}
+	function enabledDisplayKeyword(li, keyword, iconAction){
+		iconAction.removeClass('cross').removeClass('circle');
+		li.removeClass('disabled');
+		$('li.keyword-'+keyword).find('.curtain').hide();
+		iconAction.addClass('cross');
+	}
+	function disabledDisplayKeyword(li, keyword, iconAction){
+		iconAction.removeClass('cross').removeClass('circle');
+		li.addClass('disabled');
+		$('li.keyword-'+keyword).find('.curtain').show();
+		iconAction.addClass('circle');
+	}
 	
 });//ready
--- a/src/egonomy/static/egonomy/js/slideshow.js	Wed Jun 26 11:24:48 2013 +0200
+++ b/src/egonomy/static/egonomy/js/slideshow.js	Wed Jun 26 11:25:08 2013 +0200
@@ -1,13 +1,21 @@
 $(function() {
     
-    var currentSlide = 0, jqwin = $(window), jqcanvas = $(".imagezone"), jqcaption = $(".caption"), margin = 50;
+    var currentSlide = 0, jqwin = $(window), jqcaption = $(".caption"),
+        margin = 50, jqmainimg = $(".main-image"), jqbackdrop = $(".backdrop"),
+        lastSlide = null;
     
     function showSlide() {
         var slide = slides[currentSlide];
         
-        jqcaption.find("h2").text(slide.title);
-        jqcaption.find("h3").text(slide.author);
-        jqcaption.find("p").text(slide.description);
+        if (slide !== lastSlide) {
+            jqcaption.find("h2").text(slide.title);
+            jqcaption.find("h3").text(slide.author);
+            jqcaption.find("p").text(slide.description);
+            jqmainimg.attr("src", slide.image.src);
+            jqbackdrop.attr("src", slide.image.src);
+        }
+        
+        lastSlide = slide;
         
         if (slide.image && slide.image.width) {
             var ww = jqwin.width(),
@@ -23,27 +31,19 @@
                     Math.min((h2 / hi), (w1 / wi))
                 ),
                 wa = wi * ra, ha = hi * ra,
-                xa = ww - margin - wa,
                 rb = Math.max(ww / wi, wh / hi),
                 wb = wi * rb, hb = hi * rb,
                 xb = (ww - wb) / 2, yb = (wh - hb) / 2;
-            jqcanvas.attr({
-                width: ww,
-                height: wh
+            jqmainimg.css({
+                width: wa,
+                height: ha
             });
-                            
-            var ctx = jqcanvas[0].getContext('2d');
-            
-            ctx.drawImage(slide.image, xb, yb, wb, hb);
-            
-            ctx.fillStyle = 'rgba(255,255,255,.65)';
-            ctx.fillRect(0,0,ww,wh);
-            
-            ctx.fillStyle = 'rgba(0,0,0,.3)';
-            ctx.fillRect(margin + 4, wh - margin - ch + 4, cw, ch);
-            ctx.fillRect(xa + 4, margin + 4, wa, ha);
-            
-            ctx.drawImage(slide.image, xa, margin, wa, ha);
+            jqbackdrop.css({
+                width: wb,
+                height: hb,
+                left: xb,
+                top: yb
+            });
             
         }
     }
--- a/src/egonomy/templates/egonomy_all_fragments.html	Wed Jun 26 11:24:48 2013 +0200
+++ b/src/egonomy/templates/egonomy_all_fragments.html	Wed Jun 26 11:25:08 2013 +0200
@@ -6,6 +6,14 @@
 
 {% block title %}{% trans "All fragments" %}{% endblock %}
 
+{% block css_page %}
+<style>
+.bar-tools:first-child {
+    background-position: bottom center;
+}
+</style>
+{% endblock %}
+
 {% block content %}
             <div class="bar-tools clearfix">
                 <h3>
--- a/src/egonomy/templates/egonomy_all_pictures.html	Wed Jun 26 11:24:48 2013 +0200
+++ b/src/egonomy/templates/egonomy_all_pictures.html	Wed Jun 26 11:25:08 2013 +0200
@@ -6,6 +6,14 @@
 
 {% block title %}{% trans "All pictures" %}{% endblock %}
 
+{% block css_page %}
+<style>
+.bar-tools:first-child {
+    background-position: bottom center;
+}
+</style>
+{% endblock %}
+
 {% block content %}
             <div class="bar-tools clearfix">
                 <h3>
--- a/src/egonomy/templates/egonomy_annotate_picture.html	Wed Jun 26 11:24:48 2013 +0200
+++ b/src/egonomy/templates/egonomy_annotate_picture.html	Wed Jun 26 11:25:08 2013 +0200
@@ -5,6 +5,38 @@
 
 {% block title %}{% trans "Annotate a picture" %}{% endblock %}
 
+{% block popins %}
+    <div class="popin-wrap">
+        <div id="add-to-collection" class="popin popin-new-collection box-shadow">
+            <header>
+                <h2>{% trans "Add to the collection" %}</h2>
+                <a href="#" class="close-popin"></a>
+            </header>
+            <section>
+                <form action="#">
+                    <p>
+                        <label for="collection-name">{% trans "Add to" %} :</label>
+                        <label class="styled-select">
+                            <select>
+                                <option selected="" value="/egonomy/allpictures/">Images</option>
+                                <option value="/egonomy/allfragments/">Fragments</option>
+                            </select>
+                        </label>
+                    </p>
+                    <p>
+                        <label class="block" for="image-description">{% trans "Image comment" %} :</label>
+                        <textarea name="" id="image-description"></textarea>
+                    </p>
+                    <div class="buttons">
+                        <a href="#" class="btn close-popin">{% trans "Cancel" %}</a>
+                        <input class="btn" type="submit" value="{% trans 'Submit' %}">
+                    </div>
+                </form>
+            </section>
+        </div>
+    </div>
+{% endblock %}
+
 {% block content %}
             <div class="title-page">
                 <h2>{{ img.metadata.titre|default:_("No title") }}</h2>
@@ -19,7 +51,11 @@
                         <a class="icon cut" href="{% url 'create_fragment' image_id=img.id %}">{% trans "Create a fragment" %}</a>
                     </li>
                     <li>
-                        <a class="icon plus" href="#">Ajouter à ma collection</a>
+                      {% if user.is_authenticated %}
+                        <a class="icon plus open-popin" href="#add-to-collection">{% trans "Add to my collection" %}</a>
+                      {% else %}
+                        <a class="icon plus" href="{% url 'login' %}?next={% url 'annotate_picture' image_id=img.id %}">{% trans "Add to my collection" %}</a>
+                      {% endif %}
                     </li>
                     <!--li>
                         <form action="#">
--- a/src/egonomy/templates/egonomy_create_fragment.html	Wed Jun 26 11:24:48 2013 +0200
+++ b/src/egonomy/templates/egonomy_create_fragment.html	Wed Jun 26 11:25:08 2013 +0200
@@ -18,8 +18,10 @@
                     <li><a class="go-to mosaic" href="#"></a></li>
                     <li><a class="go-to search" href="#"></a></li>
                 </ul>
-                <!--ul class="clearfix">
-                    <li>
+                <ul class="clearfix">
+                    <li><a title="{% trans 'Erase the drawing' %}" href="#" class="clear-fragment">&times;</a></li>
+                    <li><a title="{% trans 'Back to the original drawing' %}" href="#" class="reset-fragment">↺</a></li>
+                    <!--li>
                         <a class="icon plus" href="#">Ajouter à ma collection</a>
                     </li>
                     <li>
@@ -28,15 +30,13 @@
                                 <input class="search-form" id="id_search" type="text" placeholder="Romantisme noir">
                             </p>
                         </form>
-                    </li>
-                </ul-->
+                    </li-->
+                </ul>
             </div>
             <article class="edition">
                 <form action="{% url 'save_fragment' %}" method="POST">
                 <div class="slideshow box-edition">
                     <div class="image-wrap">
-                        <a href="#" class="head-button clear-fragment" title="{% trans 'Erase the drawing' %}">&times;</a>
-                        <a href="#" class="head-button reset-fragment" title="{% trans 'Back to the original drawing' %}">&#8634;</a>
                         <div class="center-image">
                             <div class="image-and-fragment">
                               {% with img.info.image_file as image %}
--- a/src/egonomy/templates/egonomy_home.html	Wed Jun 26 11:24:48 2013 +0200
+++ b/src/egonomy/templates/egonomy_home.html	Wed Jun 26 11:25:08 2013 +0200
@@ -5,6 +5,14 @@
 
 {% block title %}{% trans "Home" %}{% endblock %}
 
+{% block css_page %}
+<style>
+.bar-tools:first-child {
+    background-position: bottom center;
+}
+</style>
+{% endblock %}
+
 {% block content %}
             <div class="bar-tools clearfix">
                 <h3>{% trans "Last annotated pictures" %}</h3>
--- a/src/egonomy/templates/egonomy_newbase.html	Wed Jun 26 11:24:48 2013 +0200
+++ b/src/egonomy/templates/egonomy_newbase.html	Wed Jun 26 11:25:08 2013 +0200
@@ -21,19 +21,22 @@
 </head>
 {% endblock %}
 <body>
+    {% block popins %}{% endblock %}
     <div class="wrap">
         <header class="clearfix">
             <h1><a href="{% url 'home' %}">egonomy</a></h1>
             <div class="col-right">
                 <ul class="head-login clearfix">
                     <li>
-                        <form action="{% if search_fragment %}{% url 'all_fragments' %}{% else %}{% url 'all_pictures' %}{% endif %}" method="GET">
+                        <form id="search-form" action="{% if search_fragment %}{% url 'all_fragments' %}{% else %}{% url 'all_pictures' %}{% endif %}" method="GET">
                             <p>
-			                    <input class="search-field" type="search" placeholder="{% trans 'Search' %}" id="id_search" name="search"/>
-			                    <select class="search-type">
-			                        <option value="{% url 'all_pictures' %}"{% if not search_fragment %} selected{% endif %}>Images</option>
-			                        <option value="{% url 'all_fragments' %}"{% if search_fragment %} selected{% endif %}>Fragments</option>
-			                    </select>
+			                    <input id="search-field" type="text" placeholder="{% trans 'Search' %}" id="id_search" name="search"/>
+			                    <label class="styled-select">
+				                    <select id="search-type">
+				                        <option value="{% url 'all_pictures' %}"{% if not search_fragment %} selected{% endif %}>Images</option>
+				                        <option value="{% url 'all_fragments' %}"{% if search_fragment %} selected{% endif %}>Fragments</option>
+				                    </select>
+			                    </label>
 			                    <input type="hidden" value="all" name="field">
 		                    </p>
 		                </form>
@@ -84,10 +87,10 @@
 	    {% block js_page %}
 	    <script type="text/javascript">
 		$(function() {
-		    $(".search-type").change(function() {
-		        $(".search-form").attr("action", $(this).val());
-		        if ($(".search-field").val()) {
-		            $(".search-form").submit();
+		    $("#search-type").change(function() {
+		        $("#search-form").attr("action", $(this).val());
+		        if ($("#search-field").val()) {
+		            $("#search-form").submit();
 		        }
 		    });
 		});
--- a/src/egonomy/templates/egonomy_view_fragment.html	Wed Jun 26 11:24:48 2013 +0200
+++ b/src/egonomy/templates/egonomy_view_fragment.html	Wed Jun 26 11:25:08 2013 +0200
@@ -1,118 +1,211 @@
-{% extends "egonomy_base.html" %}
+{% extends "egonomy_newbase.html" %}
 {% load static %}
 {% load i18n %}
 {% load thumbnail %}
-{% load egonomy_thumbnail %}
 
 {% block title %}{% trans "View a fragment" %}{% endblock %}
 
+{% block popins %}
+    <div class="popin-wrap">
+        <div id="add-to-collection" class="popin popin-new-collection box-shadow">
+            <header>
+                <h2>{% trans "Add to the collection" %}</h2>
+                <a href="#" class="close-popin"></a>
+            </header>
+            <section>
+                <form action="#">
+                    <p>
+                        <label for="collection-name">{% trans "Add to" %} :</label>
+                        <label class="styled-select">
+                            <select>
+                                <option selected="" value="/egonomy/allpictures/">Images</option>
+                                <option value="/egonomy/allfragments/">Fragments</option>
+                            </select>
+                        </label>
+                    </p>
+                    <p>
+                        <label class="block" for="image-description">{% trans "Image comment" %} :</label>
+                        <textarea name="" id="image-description"></textarea>
+                    </p>
+                    <div class="buttons">
+                        <a href="#" class="btn close-popin">{% trans "Cancel" %}</a>
+                        <input class="btn" type="submit" value="{% trans 'Submit' %}">
+                    </div>
+                </form>
+            </section>
+        </div>
+    </div>
+{% endblock %}
+
 {% block content %}
-                <div class="fullwidth">
-                    <div class="column column-half">
-                        <h2>{{ fragment.title }}</h2>
-                        <div class="center-image">
-                          {% if fragment_only %}
-                            <div class="image-and-fragment large_square_fragment">
-                             {% with fragment.image.info.image_file as image %}
-                             {% include "partial/fragment_only.html" %}
-                             {% endwith %}
-                            </div>
-                          {% else %}
-	                        <div class="image-and-fragment">
-	                          {% with 0.8 as ratio %}
-	                          {% with "476" as w_size %}
-	                          {% with "x600" as h_size %}
-	                          {% include "partial/picture_and_fragment.html" %}
-                              {% endwith %}
-                              {% endwith %}
-                              {% endwith %}
-	                        </div>
-                          {% endif %}
-	                    </div>
-                    </div>
-                    <div class="column column-half">
+            <div class="title-page">
+                <h2>{{ fragment.title }}</h2>
+            </div>
+            <div class="bar-tools clearfix">
+                <ul class="clearfix left">
+                    <li><a class="go-to mosaic" href="#"></a></li>
+                    <li><a class="go-to search" href="#"></a></li>
+                </ul>
+                <ul class="clearfix">
+                    {% ifequal user fragment.author %}
+                    <li>
+                        <a class="icon edit" href="{% url 'create_fragment' image_id=fragment.image.id fragment_pk=fragment.pk %}">{% trans "Modify this fragment" %}</a>
+                    </li>
+                    <li>
+                        <a class="icon trash" href="{% url 'delete_fragment' %}?fragment_pk={{fragment.pk}}" onclick="return confirm('{% trans "Do you really want to delete this fragment ? Warning : this action est irreversible." %}')">{% trans "Delete this fragment" %}</a>
+                    </li>
+                    {% endifequal %}
+                    <li>
+                        <a class="icon copy" href="{% url 'create_fragment' image_id=fragment.image.id %}?duplicate={{fragment.pk}}">{% trans "Duplicate this fragment" %}</a>
+                    </li>
+                    <li>
+                        <a class="icon cut" href="{% url 'create_fragment' image_id=fragment.image.id %}">{% trans "Create a fragment" %}</a>
+                    </li>
+                    <li>
+                      {% if user.is_authenticated %}
+                        <a class="icon plus open-popin" href="#add-to-collection">{% trans "Add to my collection" %}</a>
+                      {% else %}
+                        <a class="icon plus" href="{% url 'login' %}?next={% url 'view_fragment' fragment_pk=fragment.pk %}">{% trans "Add to my collection" %}</a>
+                      {% endif %}
+                    </li>
+                    <!--li>
+                        <a class="icon save" href="#">Enregistrer sous</a>
+                    </li>
+                    <li>
+                        <a class="icon plus open-popin" href="#add-to-collection">Ajouter à ma collection</a>
+                    </li>
+                    <li>
                         <form action="#">
-                            <table class="image-metadata">
-                                <tr>
-                                    <th>{% trans "Source picture" %}&nbsp;:</th>
-                                    <td><a href="{% url 'annotate_picture' image_id=fragment.image.id %}">{{ fragment.image.metadata.titre|default:_("No title") }}</a></td>
-                                </tr>
-                                <tr>
-                                    <th>{% trans "Fragment's description" %}&nbsp;:</th>
-                                    <td>{{ fragment.description }}</td>
-                                </tr>
-                                <tr>
-                                    <th>{% trans "Users keywords" %}</th>
-                                    <td>{{ fragment.tags }}</td>
-                                </tr>
-                                <tr>
-                                    <th>{% trans "Last modification" %}&nbsp;:</th>
-                                    <td>{{ fragment.date_saved }} {% trans 'by' %} <strong><a href="{% url 'user_fragments' username=fragment.author %}">{{ fragment.author }}</a></strong></td>
-                                </tr>
-                                {% ifequal user fragment.author %}
-                                <tr>
-                                    <th>&nbsp;</th>
-                                    <td><a href="{% url 'create_fragment' image_id=fragment.image.id fragment_pk=fragment.pk %}" class="big-button">{% trans "Modify this fragment" %}</a></td>
-                                </tr>
-                                <tr>
-                                    <th>&nbsp;</th>
-                                    <td><a href="{% url 'delete_fragment' %}?fragment_pk={{fragment.pk}}" class="big-button"  onclick="return confirm('{% trans "Do you really want to delete this fragment ? Warning : this action est irreversible." %}')">{% trans "Delete this fragment" %}</a></td>
-                                </tr>
-                                {% endifequal %}
-                                <tr>
-                                    <th>&nbsp;</th>
-                                    <td><a href="{% url 'create_fragment' image_id=fragment.image.id %}?duplicate={{fragment.pk}}" class="big-button">{% trans "Duplicate this fragment" %}</a></td>
-                                </tr>
-                            </table>
+                            <p>
+                                <input class="search-form" id="id_search" type="text" placeholder="Romantisme noir">
+                            </p>
                         </form>
-                        <div class="fullwidth">
-                            <a href="{% url 'create_fragment' image_id=fragment.image.id %}" class="big-button">{% trans "Create a fragment" %}</a>
+                    </li-->
+                </ul>
+            </div>
+            <article class="edition">
+                <div class="slideshow box-edition">
+                    <div class="image-wrap">
+                      {% if fragment_only %}
+                        <div class="image-and-fragment square-fragment-600">
+                         {% with fragment.image.info.image_file as image %}
+                         {% include "partial/fragment_only.html" %}
+                         {% endwith %}
+                        </div>
+                      {% else %}
+                        <div class="image-and-fragment">
+                          {% with 0.99 as ratio %}
+                          {% with "600" as w_size %}
+                          {% with "x600" as h_size %}
+                          {% include "partial/picture_and_fragment.html" %}
+                          {% endwith %}
+                          {% endwith %}
+                          {% endwith %}
                         </div>
-                        <div class="fullwidth">
-                          {% if fragment_only %}
-                            <a href="{% url 'view_fragment' fragment_pk=fragment.pk %}?fragment_only=0">
-                                {% trans "See the fragment in its full picture" %} :<br/>
-	                            <div class="image-and-fragment">
-	                              {% with 1 as ratio %}
-	                              {% with "110" as w_size %}
-	                              {% with "x110" as h_size %}
-	                              {% include "partial/picture_and_fragment.html" %}
-	                              {% endwith %}
-	                              {% endwith %}
-	                              {% endwith %}
-	                            </div>
+                      {% endif %}
+                    </div>
+                    <div class="arrow-wrap left-arrow">
+                        <a class="arrow" href="#"></a>
+                    </div>
+                    <div class="arrow-wrap right-arrow">
+                        <a class="arrow" href="#"></a>
+                    </div>
+                    <ul class="share">
+                        <li><a title="Partager sur Twitter" href="#" class="tool twitter"></a></li>
+                        <li><a title="Partager sur Facebook" href="#" class="tool facebook"></a></li>
+                    </ul>
+                </div>
+                <div class="info box-edition clearfix">
+                    <table class="edition-table-left">
+                        <tbody>
+                            <tr>
+                                <th>{% trans "Source picture" %}&nbsp;:</th>
+                                <td><a href="{% url 'annotate_picture' image_id=fragment.image.id %}">{{ fragment.image.metadata.titre|default:_("No title") }}</a></td>
+                            </tr>
+                            <tr>
+                                <th>{% trans "Fragment's title" %}&nbsp;:</th>
+                                <td>{{ fragment.title }}</td>
+                            </tr>
+                            <tr>
+                                <th>{% trans "Fragment's description" %}&nbsp;:</th>
+                                <td>{{ fragment.description }}</td>
+                            </tr>
+                            <tr>
+                                <th>{% trans "Last modification" %}&nbsp;:</th>
+                                <td>{{ fragment.date_saved }} {% trans 'by' %} <strong><a href="{% url 'user_fragments' username=fragment.author %}">{{ fragment.author }}</a></strong></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <table class="edition-table-right">
+                        <tbody>
+                        {% if fragment_only %}
+                            <tr><th><a href="{% url 'view_fragment' fragment_pk=fragment.pk %}?fragment_only=0">{% trans "See the fragment in its full picture" %} :</a></th></tr>
+                            <tr><td><a href="{% url 'view_fragment' fragment_pk=fragment.pk %}?fragment_only=0">
+                                <div class="image-and-fragment">
+                                  {% with 1 as ratio %}
+                                  {% with "110" as w_size %}
+                                  {% with "x110" as h_size %}
+                                  {% include "partial/picture_and_fragment.html" %}
+                                  {% endwith %}
+                                  {% endwith %}
+                                  {% endwith %}
+                                </div></a>
+                            </td></tr>
                             </a>
-                          {% else %}
-                            <a href="{% url 'view_fragment' fragment_pk=fragment.pk %}">
-                                {% trans "See the fragment only" %} :<br/>
-                                <div class="image-and-fragment little_square_fragment">
+                        {% else %}
+                            <tr><th><a href="{% url 'view_fragment' fragment_pk=fragment.pk %}">{% trans "See the fragment only" %} :</a></th></tr>
+                            <tr><td><a href="{% url 'view_fragment' fragment_pk=fragment.pk %}">
+                                <div class="image-and-fragment square-fragment-110">
                                  {% with image=fragment.image.info.image_file %}
                                  {% include "partial/fragment_only.html" %}
                                  {% endwith %}
-                                </div>
+                                </div></a>
+                            </td></tr>
                             </a>
-                          {% endif %}
-                        </div>
-                    </div>
+                        {% endif %}
+                        </tbody>
+                    </table>
+                </div>
+                <div class="box-edition">
+                    <table>
+                        <tbody>
+                            <tr>
+                                <th class="va-top">{% trans "Fragment's keywords" %}</th>
+                                <td>
+                                    <ul class="list-key-search no-before list-keywords clearfix">
+                                      {% for t in fragment.tag_list %}
+	                                    {% if t != "" %}<li><a data-tag="{{ t }}" class="box-shadow-2" href="#">{{ t }}</a></li>{% endif %}
+	                                  {% endfor %}
+                                    </ul>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
-                <div class="fullwidth">
-                    <div class="column column-full">
-                        <h2>{% trans "Fragments from this picture" %}</h2>
-                        <ul class="fullwidth">
-                          {% for fragment in fragment_list %}
-                            <li class="subcol subcol-eighth">
-                                <a href="{% url 'view_fragment' fragment_pk=fragment.pk  %}">
-                                <div class="center-image">
-                                    <div class="image-and-fragment">
-                                     {% include "partial/picture_and_red_fragment.html" %}
-                                    </div>
+                <div class="box-edition">
+                    <h3>{% trans "Fragments from this picture" %} :</h3>
+                    {% if fragment_list %}
+                    <ul class="fullwidth clearfix">
+                      {% for fragment in fragment_list %}
+                        <li class="subcol subcol-seventh">
+                            <a href="{% url 'view_fragment' fragment_pk=fragment.pk %}">
+                            <div class="center-image">
+                                <div class="image-and-fragment">
+                                 {% include "partial/picture_and_red_fragment.html" %}
                                 </div>
-                                <h3>{{ fragment.title }}</h3></a>
-                                <p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=fragment.author %}">{{ fragment.author }}</a></strong></p>
-                            </li>
-                          {% endfor %}
-                        </ul>
-                    </div>
+                            </div>
+                            <h3>{{ fragment.title }}</h3></a>
+                            <p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=fragment.author %}">{{ fragment.author }}</a></strong></p>
+                        </li>
+                      {% endfor %}
+                    </ul>
+                    {% else %}
+                    <p class="null">{% trans "No fragment" %}</p>
+                    {% endif %}
                 </div>
+                <div class="box-edition">
+                    <h3>Collections liées à cette image :</h3>
+                    <p class="null">{% trans "No collection" %}</p>
+                </div>
+            </article>
 {% endblock %}
-
--- a/src/egonomy/templates/registration/login.html	Wed Jun 26 11:24:48 2013 +0200
+++ b/src/egonomy/templates/registration/login.html	Wed Jun 26 11:25:08 2013 +0200
@@ -1,4 +1,4 @@
-{% extends "egonomy_base.html" %}
+{% extends "egonomy_newbase.html" %}
 {% load static %}
 {% load i18n %}
 
@@ -24,8 +24,7 @@
             </div>
             </div>
         </form>
-    </div> 
-
+    </div>
 {% endblock %}