diff -r 719aed020d05 -r 059e197617bb integration/css/annotation-article.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/css/annotation-article.css	Wed Jun 19 18:28:56 2013 +0200
@@ -0,0 +1,161 @@
+/* TOP BAR */
+
+.periplus-barre {
+    height: 77px; border-bottom: 1px solid #c00000; box-shadow: 0 2px 4px rgba(0,0,0,.5);
+}
+
+.periplus-barre-haut, .periplus-barre-bas-interieur {
+    width: 967px; margin: 0 auto;
+}
+
+.periplus-barre-haut {
+    height: 44px;
+}
+
+.periplus-titre {
+    float: left; line-height: 20px; font-size: 17px; font-weight: bold; margin: 2px 0 0;
+}
+
+.periplus-titre h2 {
+    font-style: italic; color: #C00000;
+}
+
+.periplus-dossier-docu {    
+    float: right; height: 24px; line-height: 24px; border: 1px solid #197caa; margin: 9px 10px 0 0;
+}
+
+.periplus-dossier-docu a {
+     color: #197caa;
+}
+
+.periplus-dossier-docu li {
+    float: left;
+}
+
+.periplus-nom-dossier {
+    font-size: 15px; font-weight: bold; background: url(../img/icone-dossier.png) 3px center no-repeat;
+    padding: 0 6px 0 26px;
+}
+
+.periplus-fleche-article {
+    font-size: 22px; border-left: 1px solid #197caa;
+}
+
+.periplus-article-precedent {
+    padding: 0 3px 0 2px;
+}
+
+.periplus-article-suivant {
+    padding: 0 2px 0 3px;
+}
+
+.periplus-recherche {
+    width: 320px; margin: 0 auto;
+}
+
+.periplus-recherche-champ {
+    float: left; border: 1px solid; padding: 0 2px; margin: 9px 0 0; font-size: 14px; height: 24px; line-height: 24px; width: 240px;
+}
+
+.periplus-recherche-envoi {
+    float: left; border: none; padding: 0; margin: 9px 0 0 4px; background: #000000 url(../img/zoom-button.jpg) center no-repeat;
+    width: 54px; height: 26px; text-indent: -9999px;
+}
+
+.periplus-barre-bas {
+    height: 32px; background: #000000; color: #FFFFFF;
+}
+
+.periplus-barre-bas a {
+    color: #FFFFFF;
+}
+
+.periplus-home {
+    float: left; background-image: url("../img/home-sprite.png"); background-position: 0 -28px;
+    display: block; height: 28px; width: 28px; margin: 2px 10px 0 0;
+}
+
+.periplus-home:hover {
+    background-position: 0 0;
+}
+
+.periplus-fil-ariane {
+    float: left; line-height: 32px; font-size: 16px; font-weight: bold;
+}
+
+.periplus-fil-ariane li {
+    float: left;
+}
+
+.periplus-fil-ariane li:nth-child(n+2):before {
+    float: left; content: "›"; margin: 0 5px;
+}
+
+
+/* ANNOTATIONS */
+
+.content span {
+    background-image: inherit;
+}
+
+.annotation-frame {
+    position: absolute; float: left; clear: both; display: none; border: 2px solid;
+    margin: -4px 0 0 -4px;
+}
+.annotation-area {
+    float: left; clear: both; width: 490px; padding: 2px; opacity: .2;
+}
+.annotation-form {
+    float: left; clear: both; width: 490px; padding: 2px; background: rgba(200,200,200,.8);
+}
+.annotation-form h3 {
+    color: #197CAA; font-size: 14px; font-weight: bold;
+}
+.annotation-textarea {
+    margin: 5px; height: 120px; resize: none; border: 1px solid #666; padding: 2px; width: 474px;
+}
+.annotation-list li {
+    margin-bottom: 5px; border: 2px solid; padding: 0 4px; font-size: 13px; cursor: hand;
+}
+.annotation-list h3 {
+    font-weight: bold; font-size: 14px; margin: 4px 0;
+}
+.annotation-list p {
+    margin: 4px 0;
+}
+.annotation-list li.selected {
+    background: #f8f8f8;
+}
+.annotation-text {
+    font-style: italic; color: #666;
+}
+.annotation-text b {
+    font-style: normal; color: #800;
+}
+.annotation-selected {
+    color: #ffffff;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGD4DwABBAEAfbLI3wAAAABJRU5ErkJggg==) !important;
+}
+.annotation-frame-box {
+    display: none;
+}
+
+.annotation-frame-box div {
+    position: absolute; background: rgba(128,128,128,0.5);
+}
+
+.annotation-fb-top {
+    top: 77px; left: 0; right: 0;
+}
+
+.annotation-fb-left {
+    left: 0;
+}
+
+.annotation-fb-right {
+    right: 0;
+}
+
+.annotation-fb-bottom {
+    left: 0; right: 0;
+}
\ No newline at end of file