From: Olga Brani <olgabrani@grnet.gr>
Date: Wed, 2 May 2012 14:14:18 +0000 (+0300)
Subject: New html styles
X-Git-Tag: astakos/v0.7.0~4^2~21
X-Git-Url: https://code.grnet.gr/git/astakos/commitdiff_plain/0f4a8a683745a60d22a61d702d489915feef1dcc

New html styles
---

diff --git a/.gitignore b/.gitignore
index 97cbc26..7648fd5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,6 @@ docs/build
 *.pyc
 *.egg-info
 .DS_Store
+.project
+.pydevproject
 snf-astakos-app/astakos/version.py
diff --git a/snf-astakos-app/astakos/im/static/im/cloudbar/cloudbar.js b/snf-astakos-app/astakos/im/static/im/cloudbar/cloudbar.js
index a1f1a34..c936146 100644
--- a/snf-astakos-app/astakos/im/static/im/cloudbar/cloudbar.js
+++ b/snf-astakos-app/astakos/im/static/im/cloudbar/cloudbar.js
@@ -32,8 +32,8 @@ $(document).ready(function(){
     }
 
     var root = $('body');
-    var bar = $('<div class="servicesbar"></div>');
-    var services = $('<div class="services"></div>');
+    var bar = $('<div class="header"></div>');
+    var services = $('<ul class="services"></ul>');
     var profile = $('<div class="profile"></div>');
     
     var get_services_url = window.GET_SERVICES_URL || window.CLOUDBAR_SERVICES;
@@ -41,6 +41,7 @@ $(document).ready(function(){
     // create services links and set the active class to the current service
     $.getJSON(get_services_url + "?callback=?", function(data) {
             $.each(data, function(i, el){
+            var sli = $("<li>");
             var slink = $("<a>");
             if (el.icon) {
                 slink.append($('<img src="'+cssloc+el.icon+'"/>'));
@@ -50,9 +51,10 @@ $(document).ready(function(){
             }
             slink.attr('href', el.url);
             slink.attr('title', el.name);
-            services.append(slink);
+            sli.append(slink);
+            services.append(sli);
             if (el.id == ACTIVE_MENU) {
-                slink.addClass("active");
+                sli.addClass("active");
             }
         });
       });
@@ -86,7 +88,7 @@ $(document).ready(function(){
     user.append(username);
     user.append(usermenu);
     profile.append(user);
-    bar.append(services).append(profile);
+    bar.append(profile).append(services);
     
 
     root.prepend(bar);
diff --git a/snf-astakos-app/astakos/im/static/im/cloudbar/home-icon.png b/snf-astakos-app/astakos/im/static/im/cloudbar/home-icon.png
index 2901845..107f213 100644
Binary files a/snf-astakos-app/astakos/im/static/im/cloudbar/home-icon.png and b/snf-astakos-app/astakos/im/static/im/cloudbar/home-icon.png differ
diff --git a/snf-astakos-app/astakos/im/static/im/css/browser-fixes.css b/snf-astakos-app/astakos/im/static/im/css/browser-fixes.css
new file mode 100644
index 0000000..806deba
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/css/browser-fixes.css
@@ -0,0 +1,27 @@
+body											{ -webkit-text-size-adjust:100%; }
+
+/* Mozilla */
+@-moz-document url-prefix() {
+	button::-moz-focus-inner,
+	input[type="image"]::-moz-focus-inner,
+	input[type="submit"]::-moz-focus-inner,
+	input[type="reset"]::-moz-focus-inner,
+	input[type="button"]::-moz-focus-inner 		{ border:0; }
+	textarea 									{ resize:none; }
+}
+
+/* Webkit */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	button,
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"]						{ -webkit-appearance:button; }
+	input[type="text"]:focus,
+	input[type="password"]:focus,
+	textarea:focus 								{ outline:0 none; }
+	textarea 									{ resize:none; }
+	input[type="checkbox"],
+	input[type="radio"]							{ vertical-align:-2px; }
+	input[type="search"]								{ -webkit-appearance:textfield; }
+	input[type="search"]::-webkit-search-cancel-button	{ -webkit-appearance:none; }
+}
diff --git a/snf-astakos-app/astakos/im/static/im/css/colorbox.css b/snf-astakos-app/astakos/im/static/im/css/colorbox.css
new file mode 100644
index 0000000..eb6f6f2
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/css/colorbox.css
@@ -0,0 +1,127 @@
+
+#colorbox, #cboxOverlay, #cboxWrapper {
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    z-index: 9999;
+}
+#cboxOverlay {
+    height: 100%;
+    position: fixed;
+    width: 100%;
+}
+#cboxMiddleLeft, #cboxBottomLeft {
+    clear: left;
+}
+#cboxContent {
+    position: relative;
+}
+#cboxLoadedContent {
+    overflow: auto;
+}
+#cboxTitle {
+    margin: 0;
+}
+#cboxLoadingOverlay, #cboxLoadingGraphic {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
+    cursor: pointer;
+}
+.cboxPhoto {
+    border: 0 none;
+    display: block;
+    float: left;
+    margin: auto;
+}
+.cboxIframe {
+    border: 0 none;
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+#cboxOverlay {
+    background: none repeat scroll 0 0 #000000;
+}
+#cboxContent {
+    margin-top: 20px;
+}
+.cboxIframe {
+    background: none repeat scroll 0 0 #FFFFFF;
+}
+#cboxError {
+    border: 1px solid #CCCCCC;
+    padding: 50px;
+}
+#cboxLoadedContent {
+    background: none repeat scroll 0 0 #FFFFFF;
+    border: 5px solid #000000;
+}
+#cboxTitle {
+    color: #CCCCCC;
+    left: 0;
+    position: absolute;
+    top: -20px;
+}
+#cboxCurrent {
+    color: #CCCCCC;
+    position: absolute;
+    right: 0;
+    top: -20px;
+}
+#cboxSlideshow {
+    color: #FFFFFF;
+    position: absolute;
+    right: 90px;
+    top: -20px;
+}
+#cboxPrevious {
+    background: url("../images/colorbox/controls.png") no-repeat scroll left top transparent;
+    height: 65px;
+    left: 5px;
+    margin-top: -32px;
+    position: absolute;
+    text-indent: -9999px;
+    top: 50%;
+    width: 28px;
+}
+#cboxPrevious:hover {
+    background-position: left bottom;
+}
+#cboxNext {
+    background: url("../images/colorbox/controls.png") no-repeat scroll right top transparent;
+    height: 65px;
+    margin-top: -32px;
+    position: absolute;
+    right: 5px;
+    text-indent: -9999px;
+    top: 50%;
+    width: 28px;
+}
+#cboxNext:hover {
+    background-position: right bottom;
+}
+#cboxLoadingOverlay {
+    background: none repeat scroll 0 0 #000000;
+}
+#cboxLoadingGraphic {
+    background: url("../images/colorbox/loading.gif") no-repeat scroll center center transparent;
+}
+#cboxClose {
+    background: url("../images/colorbox/controls.png") no-repeat scroll center top transparent;
+    display: block;
+    height: 19px;
+    position: absolute;
+    right: 5px;
+    text-indent: -9999px;
+    top: 5px;
+    width: 38px;
+}
+#cboxClose:hover {
+    background-position: center bottom;
+}
\ No newline at end of file
diff --git a/snf-astakos-app/astakos/im/static/im/css/dropkick.css b/snf-astakos-app/astakos/im/static/im/css/dropkick.css
new file mode 100644
index 0000000..fabb1e1
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/css/dropkick.css
@@ -0,0 +1,167 @@
+/**
+ * Default DropKick theme
+ *
+ * Feel free to edit the default theme
+ * or even add your own.
+ *
+ * See the readme for themeing help
+ *
+ */
+
+/***** Begin Theme, feel free to edit in here! ******/
+
+/* One container to bind them... */
+.dk_container {
+   font-family: 'Antic', sans-serif;
+  
+  font-weight: normal;
+  line-height: 42px;
+  letter-spacing: 1px;
+  border: 1px solid #808080;
+  height:42px;
+  display: inline-block;
+  margin-bottom: -1px;
+  padding-left:21px;
+  
+  z-index: 2;
+  width:308px;
+}
+  .dk_container:focus {
+    outline: 0;
+  }
+  .dk_container a {
+    cursor: pointer;
+    text-decoration: none;
+    color:#808080;
+	 
+  }
+
+/* Opens the dropdown and holds the menu label */
+.dk_toggle {
+  /**
+   * Help: Arrow image not appearing
+   * Try updating this property to your correct dk_arrows.png path
+   */
+   background:url(../images/arrow_02.jpg) no-repeat 276px center;
+  
+}
+  .dk_toggle:hover {
+    
+  }
+  /* Applied when the dropdown is focused */
+  .dk_focus .dk_toggle {
+    
+  }
+  .dk_focus .dk_toggle {
+    
+  }
+
+/* Applied whenever the dropdown is open */
+.dk_open {
+  
+  /**
+   * Help: Dropdown menu is covered by something
+   * Try setting this value higher
+   */
+  z-index: 10;
+}
+  .dk_open .dk_toggle {
+    
+    
+  }
+
+/* The outer container of the options */
+.dk_options {
+  
+}
+  .dk_options a {
+    background-color: #fff;
+    border-bottom: 1px solid #999;
+    padding: 8px 20px;
+  }
+  .dk_options li:last-child a {
+    border-bottom: none;
+  }
+  .dk_options a:hover,
+  .dk_option_current a {
+    
+  }
+
+/* Inner container for options, this is what makes the scrollbar possible. */
+.dk_options_inner  {
+  padding:0;
+  margin:0;  
+  border: 1px solid #808080;
+  border-top:0 none;
+}
+.dk_options_inner li	{ list-style:none outside;}
+
+/* Set a max-height on the options inner */
+.dk_options_inner,
+.dk_touch .dk_options {
+  max-height: 250px;
+}
+
+/******  End Theme ******/
+
+/***** Critical to the continued enjoyment of working dropdowns ******/
+
+.dk_container {
+  display: none;
+  position: relative;
+}
+  .dk_container a {
+    outline: 0;
+  }
+
+.dk_toggle {
+  display: -moz-inline-stack;
+  display: inline-block;
+  *display: inline;
+  position: relative;
+  zoom: 1;
+}
+
+.dk_open {
+  position: relative;
+}
+  .dk_open .dk_options {
+    display: block;
+  }
+  .dk_open .dk_label {
+    color: inherit;
+  }
+
+.dk_options {
+  display: none;
+  margin-top: -1px;
+  position: absolute;
+  right: 0;
+  width: 100%;
+}
+  .dk_options a,
+  .dk_options a:link,
+  .dk_options a:visited {
+    display: block;
+  }
+  .dk_options_inner {
+    overflow: auto;
+    position: relative;
+  }
+
+.dk_touch .dk_options {
+  overflow: hidden;
+}
+
+.dk_touch .dk_options_inner {
+  max-height: none;
+  overflow: visible;
+}
+
+.dk_fouc select {
+  position: relative;
+  top: -99999em;
+  visibility: hidden;
+}
+
+/***** End Critical to the continued enjoyment of working dropdowns ******/
diff --git a/snf-astakos-app/astakos/im/static/im/css/formating.css b/snf-astakos-app/astakos/im/static/im/css/formating.css
new file mode 100644
index 0000000..310b486
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/css/formating.css
@@ -0,0 +1,105 @@
+/* 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						{ border:0; margin:0; padding: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; }
+
+/* defaults -----------------------------------*/
+:link, a, a:visited								{ color:#F89A1C; text-decoration:none; }
+a:hover											{ outline:0; text-decoration:underline; }
+a:focus											{ outline:0 none; text-decoration:none; }
+a:active										{ outline:0; text-decoration:none; }
+a img, :link img, :visited img					{ border:none; }
+a span											{ cursor:pointer; }
+abbr[title], dfn[title]							{ border-bottom:1px dotted; cursor:help; }
+address											{ font-style:italic; margin:0 0 1.5em 0; }
+body											{ background:white; color:#222; font-family: Antic, Arial, sans-serif; font-size:81.3%; line-height:1.5; text-align:left; letter-spacing:1px; }
+code, kbd, pre, samp							{ font-family:monospace, sans-serif; }
+del												{ text-decoration:line-through; }
+dl												{ margin:1em 0; }
+dl dd											{ margin-left:1em; }
+dt												{ font-weight:bold; }
+em, i											{ font-style:italic; font-weight:inherit; }
+h1, h2, h3, h4, h5, h6							{ font-weight:bold; line-height:1.4; margin-bottom:0; }
+/* Typographic scale based on 12px body size */
+h1												{ font-size:4em; }
+h2												{ font-size:1.231em; }
+h3												{ font-size:1.154em; }
+h4												{ font-size:1.5em; }
+h5												{ font-size:1.333em; }
+h6												{ font-size:1.167em; }
+hr												{ border:0; border-top:1px solid; display:block; height:1px; margin:1em 0; padding:0; }
+img												{ border:0; vertical-align:middle; }
+ins												{ text-decoration:none; }
+p												{ margin-bottom:1em; }
+pre												{ overflow:auto; line-height:24px; }
+strong, b										{ font-weight:bold; font-style:inherit; }
+sub, sup										{ font-size:75%; line-height:0; position:relative; vertical-align:baseline; }
+sub												{ bottom:-0.25em; }
+sup												{ top:-0.5em; }
+
+button, input, select, textarea					{ font-size:100%; margin:0; vertical-align:baseline; }
+button, input									{ line-height:normal; }
+button[disabled], input[disabled]				{ cursor:default; }
+button,
+input[type="image"],
+input[type="submit"],
+input[type="reset"],
+input[type="button"]							{ cursor:pointer; overflow:visible; }
+input[type="checkbox"],
+input[type="radio"]								{ box-sizing:border-box; padding:0; }
+legend											{ border:0; white-space:normal; }
+optgroup										{ font-style:normal; font-weight:bold; }
+textarea										{ overflow:auto; vertical-align:top; }
+
+q												{ quotes:"‘" "’" "“" "”"; } /* http://html5doctor.com/blockquote-q-cite/ */
+q:before										{ content:"‘"; content:open-quote; }
+q:after											{ content:"’"; content:close-quote; }
+q q:before										{ content: "“"; content: open-quote; }
+q q:after										{ content: "”"; content: close-quote; }
+blockquote										{ quotes: "“" "”"; margin:1em 40px; }
+blockquote p:before								{ content: "“"; content: open-quote; }
+blockquote p:after								{ content: ""; content: no-close-quote; }
+blockquote p:last-of-type:after					{ content: "”"; content: close-quote; }
+blockquote										{ font-style:italic; margin:1em; }
+
+caption											{ font-weight:bold; text-align:left; margin-bottom:.2em; padding:0; }
+table											{ border-collapse:collapse; border-spacing:0; margin-bottom:1em; }
+tfoot											{ font-style:italic; }
+thead td, th									{ font-weight:bold; vertical-align:top; }
+
+ol												{ list-style-type:decimal; margin:1em 0; padding-left:2em; }
+ol li											{ list-style:decimal outside; }
+ol ol li										{ list-style-type:lower-alpha; }
+ol ol ol li										{ list-style-type:lower-roman; }
+
+ul												{ list-style-type:disc; margin:1em 0; padding-left:2em; }
+ul li											{ list-style:disc outside; }
+ul ul li										{ list-style-type:circle; }
+ul ul ul li										{ list-style-type:square; }
+
+/* helpers ------------------------------------*/
+.clearfix:before,
+.clearfix:after									{ content:" "; display:block; height:0; visibility:hidden; } /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ */
+.clearfix:after									{ clear:both; }
+.visuallyhidden									{ position:absolute !important; clip:rect(0 0 0 0); }
+
+/* misc ---------------------------------------*/
+img[align="left"]								{ margin:0 1em 0.5em 0; }
+img[align="right"]								{ margin:0 0 0.5em 1em; }
diff --git a/snf-astakos-app/astakos/im/static/im/css/forms.css b/snf-astakos-app/astakos/im/static/im/css/forms.css
new file mode 100644
index 0000000..5b1adc3
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/css/forms.css
@@ -0,0 +1,308 @@
+/* generic form styles */
+input, textarea, .form-widget {
+  background-color: #ffffff;
+  color: #000;
+  border-color: #000000;
+}
+#forms .input, #forms input {
+  font-family: 'Antic', sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 22px;
+  letter-spacing: 1px;
+  border: 1px solid #808080;
+  height: 21px;
+  display: inline-block;
+  margin-bottom: -1px;
+  padding: 0.8em;
+  padding-left: 1.5em;
+  z-index: 2;
+}
+#forms .input:focus, #forms input:focus {
+  position: relative;
+  border: 1px solid #000;
+  z-index: 100;
+}
+#forms .input:focus label, #forms input:focus label {
+  z-index: 300;
+}
+.altcol {
+  background-color: #c3c3b9 !important;
+}
+.altcol:hover {
+  background-color: #f89a1c !important;
+}
+
+form.withlabels label {
+  width: 224px;
+  display: block;
+  float: left;
+  padding-top: 1em;
+}
+form.withlabels input[type=text], form.withlabels input[type=password] {
+  width: 224px;
+}
+form.withlabels input[type=text].long, form.withlabels input[type=password].long, form.withlabels textarea.long {
+  width: 224px;
+}
+.login-section a.button {
+  margin-bottom: 12px;
+}
+.login-section a.button:last-child {
+  margin-bottom: none;
+}
+.login-section a.button.withicon {
+  background-repeat: no-repeat;
+  background-position: 15px 50%;
+  padding-left: 40px;
+}
+.login-section.loggedin {
+  padding-bottom: 0 !important;
+  background-image: none !important;
+}
+form.login {
+  margin-bottom: 22px;
+  width:340px;
+}
+
+form h2 span {
+  padding-bottom: 3px;
+}
+form .form-row {
+  min-height: 29.333333333333332px;
+  position: relative;
+}
+form .form-row.submit {
+  margin: 22px 0 ;
+}
+form .form-row .extra-link {
+  color: #808080;
+  text-decoration: none;
+  border: none;
+ 
+ line-height:42px;
+  float: right;
+}
+form .form-row .extra-link:hover	{ text-decoration:underline;}
+form .form-row label {
+  font-size: 1.1em;
+}
+form.innerlabels label {
+  position: absolute;
+  top: 1.1em;
+  left: 1.5em;
+  color: #808080 ;
+}
+form.innerlabels p {
+  margin:0;
+  position: relative;
+}
+form.innerlabels p.p15px	{ font-size:1.154em;}
+form.innerlabels p.p15px a	{ margin:0 5px;}
+form.innerlabels p.p15px a:hover	{ text-decoration:underline;}
+form.innerlabels a,
+form.innerlabels a:hover { border:0 none;}
+form textarea,
+form input.text,
+form input[type="text"],
+form input[type="password"]  {
+  color:#808080; 
+  font-family: 'Antic', sans-serif;
+  font-weight: normal;
+  line-height: 22px;
+  letter-spacing: 1px;
+  border: 1px solid #808080;
+  height: 21px;
+  display: inline-block;
+  margin-bottom: -1px;
+  padding: 0.8em;
+  padding-left: 1.5em;
+  z-index: 2;
+  width:300px;
+}
+
+form select	{
+	font-family: 'Antic', sans-serif;
+  font-weight: normal;
+  line-height: 22px;
+  letter-spacing: 1px;
+  border: 1px solid #808080;
+  display:block;
+  margin-bottom: -1px;
+  padding: 0.8em;
+  padding-left: 1.5em;
+  z-index: 2;
+  width:331px;
+}
+form textarea:focus,
+form input.text:focus,
+form input[type="text"]:focus,
+form input[type="password"]:focus {
+  position: relative;
+  border: 1px solid #000;
+  z-index: 100;
+}
+form textarea:focus label,
+form input.text:focus label,
+form input[type="text"]:focus label,
+form input[type="password"]:focus label {
+  z-index: 300;
+}
+form input.submit, form input[type="submit"] {
+  font-family: 'Antic', sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 22px;
+  letter-spacing:1px;
+  background-color: #3582ac;
+  color: #ffffff;
+  border: none;
+  padding: 10px 22px;
+  font-size: 1em;
+  
+}
+form input.submit:hover, form input[type="submit"]:hover {
+  background-color: #f89a1c;
+}
+form input.submit.back, form input[type="submit"].back {
+  text-decoration: none;
+  bottom: 0;
+  float: right;
+  z-index: 500;
+}
+form input.submit.back.right, form input[type="submit"].back.right {
+  right: 0;
+}
+form input.submit:hover, form input[type="submit"]:hover {
+  background-color: #f89a1c;
+}
+form input.submit.back, form input[type="submit"].back {
+  text-decoration: none;
+  bottom: 0;
+  float: right;
+  z-index: 500;
+}
+form input.submit.back.right, form input[type="submit"].back.right {
+  right: 0;
+}
+form textarea {
+  height: 150px;
+  width: 350px; 
+  max-height:150px;
+  max-width:350px;
+}
+form .with-errors input, form .with-errors textarea, form .with-errors select {
+  color: #9d261d;
+}
+form .with-errors label {
+  color: #e4776f;
+}
+.form-error {
+  background-color: #9d261d;
+  color: #fff;
+  font-size: 0.8em;
+  padding: 5px 5px;
+}
+.form-errors.all .form-error {
+  position: relative;
+  border-radius: 0;
+  margin-bottom: 1.3em;
+  padding: 0.5em;
+}
+div.form-stacked {
+  margin-bottom: 4em;
+}
+
+.checkbox-widget.checked {
+    background-color: #FF0000;
+    background-image: url("../images/checkbox.png");
+    background-position: 50% 50%;
+}
+.checkbox-widget {
+    border: 1px solid #808080;
+    cursor: pointer;
+    display: block;
+    float: left;
+    height: 25px;
+    margin:5px 20px 0 0 ;
+    width: 25px;
+   
+}
+
+
+form.withlabels .checkbox-widget{
+	margin-top:20px;	
+}
+
+form.innerlabels .checkbox-widget +  label	{
+	position:static;
+	line-height:36px;
+	color:#808080;
+	
+}
+
+form.innerlabels .checkbox-widget +  label + a	{
+	border-bottom:1px solid #F89A1C;
+	font-size: 1.1em;
+	
+}
+
+form span.info{
+    position:absolute;
+    z-index:10; 
+    top:8px; 
+    left: 260px;
+   
+}
+form span.info em {
+    display:block; 
+    overflow:hidden;
+    position:absolute;
+    left:0; 
+    text-indent:-100px;
+    top:0; 
+    height:28px;
+    width:28px;
+    background:url(../images/question-mark.jpg) no-repeat left bottom;
+    cursor:pointer;	   
+}
+
+form span.info:hover em {
+    background-position:left top;
+}
+
+form span.info span  {
+    position:relative; 
+    left:42px;
+    top:2px;
+    width:150px;
+    padding-left:55px; 
+    background:url(../images/black-line.jpg ) no-repeat left 12px;
+    min-height:50px;
+    display:none;
+    color:#b3b3b3;
+}
+
+form span.info span  a {
+	color:#b3b3b3;
+	border-bottom:1px solid #F89A1C; 	
+}
+
+form span.info:hover span {
+    display:block;
+}
+
+form p	{
+	margin-bottom:0;
+}
+
+
+form input[readonly=true] {
+  background-color: #ddd;
+  color: #5e5e5e;
+}
+
+#recaptcha_area {
+	margin-top:20px;
+}
+ 
\ No newline at end of file
diff --git a/snf-astakos-app/astakos/im/static/im/css/global.css b/snf-astakos-app/astakos/im/static/im/css/global.css
new file mode 100644
index 0000000..709ac42
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/css/global.css
@@ -0,0 +1,6 @@
+@import url(formating.css);
+@import url(modules.css);
+@import url(colorbox.css);
+@import url(browser-fixes.css);
+@import url(forms.css);
+@import url(dropkick.css);
\ No newline at end of file
diff --git a/snf-astakos-app/astakos/im/static/im/css/ie7.css b/snf-astakos-app/astakos/im/static/im/css/ie7.css
index d9f8201..f406a35 100644
--- a/snf-astakos-app/astakos/im/static/im/css/ie7.css
+++ b/snf-astakos-app/astakos/im/static/im/css/ie7.css
@@ -1,13 +1,11 @@
-.navigation {
-    min-width: 660px;
-}
-
-.mainnav.inline {
-    position: absolute;
-    right: -10px;
-}
-
-.mainnav.inline.subnav {
-    position: relative;
-    top: 50px;
-}
+button, input, select, textarea					{ vertical-align:middle; }
+input[type="button"], input[type="submit"]		{ overflow:visible; }
+input[type="checkbox"],
+input[type="radio"]								{ width:13px; height:13px; }
+legend											{ margin-left:-7px; }
+textarea										{ overflow:auto; }
+img												{ -ms-interpolation-mode:bicubic; }
+
+.clearfix										{ zoom:1; }
+.container .navigation ul li						{ display:inline;}
+.lt .box-more ul.col								{ display:inline;}
\ No newline at end of file
diff --git a/snf-astakos-app/astakos/im/static/im/css/modules.css b/snf-astakos-app/astakos/im/static/im/css/modules.css
new file mode 100644
index 0000000..53104d3
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/css/modules.css
@@ -0,0 +1,191 @@
+.wrapper                                        { margin:0 auto; position:relative; width:820px; padding:36px 70px; }
+.container .wrapper,
+.footer .wrapper                                { border: 1px solid #808080; border-top:0 none;}
+.centered                                       { text-align:center;}
+img.left						                { margin:0 1em 1em 0; float:left;}
+img.right						                { margin:0 0 1em 1em; float:right;}
+
+
+/* header */
+.header                                         { background:#000; color:#fff;	 height:35px; line-height:35px; }	
+.header .wrapper                                { width:auto; padding:0;}			
+.header a                                       { color:#fff; text-decoration:none;}
+.header .profile                                { float:right; background:#01A1AE; width:150px; padding:0 20px; text-align:right;  }
+.header .profile a                              { text-decoration:none; color:#fff; }
+.header .profile ul                             { position:absolute; right:0; top:35px; padding:0; margin:0; background:#01A1AE; width:190px; display:none;	}
+.header .profile ul li                          { list-style:none outside; line-height:35px; border-top:1px solid #000; padding:0 20px;}
+.header .profile ul li:hover					{ background:#000;}
+.header .profile:hover ul                       { display:block; }
+.header ul.services                             { margin:0; padding:0; }
+.header ul.services li                          { float:left; height:35px; line-height:35px; text-align:center; padding: 0 30px; list-style:none outside;}
+.header ul.services li:first-child              { padding:0 5px;}
+.header ul.services li.active                   { background:#333;}
+.header ul.services li:hover                    { background:#444; }
+
+
+/* footer */
+.footer                                         { font-size:0.923em;color:#B3B3B3; }
+.footer a                                       { color:#B3B3B3; text-decoration:none; transition:color 0.15s ease-in-out 0s; -moz-transition: color 0.15s ease-in-out 0s;  -webkit-transition: color 0.15s ease-in-out 0s;  -o-transition: color 0.15s ease-in-out 0s; } 
+.footer:hover a                                 { color:#808080;}
+.footer a:hover                                 { color:#000;}
+.footer ul                                      { float:left; margin:0 0 0 22px; width:140px;  padding:0;}
+.footer ul li                                   { padding:0; margin:0 0 0.5em 0; list-style:none outside;}
+.footer ul li:first-child                       { margin-bottom:1em;	}
+.footer .clearfix                               { padding-bottom:20px;}
+.footer .clearfix ul:first-child                { margin-left:0;}
+
+
+/*top message*/
+.top-msg	                                    { margin:-36px -70px 40px; background:blue; padding:100px 200px; color:#fff; display:none; position:relative;}
+.top-msg  p	                                    { font-size:1.5em;}
+.top-msg  p.title	                            { font-size:2em;  }
+.top-msg  p.title span	                        { border-bottom:2px dotted #fff; padding:0 0 10px 0;}
+.top-msg.active                             	{ display:block;}
+.active+h1	                                    { display:none;}
+.top-msg .close                                 { position:absolute; bottom:20px; right:20px; font-size:2em; font-weight:bold; border:0 none; color:#fff; text-decoration:none;}
+
+/* container */
+.container h1									{ margin:0; line-height:100%;}
+.container .wrapper                             { padding-bottom:100px;}
+.container .navigation                          { margin:20px 0 40px; font-size:1.231em;}
+.container .navigation ul                       { margin:5px 0; padding:0;}
+.container .navigation ul li                    { list-style:none outside; padding:0; margin:0 0 0 1em; display:inline-block;}
+.container .navigation ul li:first-child        { margin-left:0;}
+.container .navigation ul li a                  { color:#000; text-decoration:none; }
+.container .navigation ul li a:hover            { border-bottom:1px solid #F89A1C;}	
+.container .navigation ul li.active a           { color:#F89A1C; }					
+.dotted                                         { background:url(../images/double-dots.jpg) no-repeat bottom center; padding:30px 0; margin-bottom:30px;}
+.two-cols .rt                                   { float:right; width:390px;}
+.two-cols .lt                                   { float:left; width:390px;}
+.two-cols .lt p                                 { padding-right:40px;}
+.two-cols-lt580 .rt                             { float:right; width:200px; margin-left:40px;}
+.two-cols-lt580 .lt                             { overflow:hidden;}
+.container h2, .container h3                    { font-weight:normal; margin-bottom:1em; }
+.container h2 em 								{ color: #3582AC; font-style:normal; }
+.content a						                { border-bottom: 1px solid #F89A1C; text-decoration:none; color:#000; }
+.content a:hover					            { border-bottom: 1px solid #F89A1C; text-decoration:none; color:#F89A1C; }
+.container ul.options                           { font-size:1.231em; padding:0; margin:0;}
+.container ul.options li                        { list-style:none outside; margin:0 0 1em 0;padding:0;}
+.container ul.options li a				        { border:0 none;}
+.container ul.options li a:hover				{ text-decoration:underline;}
+.landing h2, .landing a:hover                   { color:#01A1AE;}
+.faq h2, .faq a:hover                           { color:#EF4F54; border:0 none;}
+.faq ul                                         { padding:0; margin:0; }
+.faq ul li                                      { list-style:none outside; padding:0 0 0 5px; margin:0;  }
+.faq ul li a                                    { color:#222222; border:0 none;} 
+.follow h3 a                                    { color:#4085A6;}
+.follow a				                    	{ border:0 none;}
+.follow ul                                      { margin:0; padding:0;}
+.follow ul li                                   { list-style:none outside; padding:0; margin:0 0 20px 0; font-size:0.923em; color:#808080;}
+.follow ul li p.title                           { margin-bottom:0; color:#000;}
+.follow ul li p.title a                         { color:#000;}
+.follow ul li p a                               { color:#808080;}
+.posts ul                                       { margin:0;padding:0; }
+.posts ul li                                    { padding:0; margin:0 0 50px; list-style:none outside; }
+.posts ul li .img-div                           { float:left; width:160px; margin-right:20px; }
+.posts ul li .img-div img                       { max-width:160px;}
+.posts ul li .img-div p                         { font-size:1.154em; color:#01A1AE;}
+.posts ul li .txt                               { overflow:hidden;} 
+.posts ul li .txt h3                            { color:#F89A1C;}
+.posts ul li .txt h3 a                          { color:#F89A1C; border:0 none; }
+.posts ul li p.info                             { background:url(../images/blog-dots.jpg) no-repeat top; padding-top:10px; margin-top:20px; font-size:0.923em; color:#808080;}
+.article p.info 								{ margin-top:20px; padding-top:10px; font-size:0.923em; color:#808080; border-top:1px dashed #ccc;}
+p.info a                                        { color:#808080; }
+.bg-wrap                                        { background-position:right top; background-repeat:no-repeat;}
+.bg-wrap .extra                                 { display:none;}
+.bg-wrap.open .extra                            { display:block;}
+.bg-wrap .extra .hide-extra                     { display:block; text-align:right; border:0 none; height:16px; overflow:hidden;}
+.bg-wrap .extra .hide-extra img                 { margin-top:0; vertical-align:top; display:inline; }
+.bg-wrap .extra .hide-extra:hover img           { margin-top:-16px;}
+.cyclades .bg-wrap .extra .hide-extra:hover img { margin-top:-32px;}
+.pithos h2, .pithos a:hover,                     
+.pithos .extra .options li                      { color:#F89A1C; }
+.cyclades h2, .cyclades a:hover,                     
+.cyclades .extra .options li                    { color:#4085A6; }
+.cyclades a							            { border-bottom:1px solid #4085A6; }
+.cyclades a:hover							    { border-bottom:1px solid #4085A6; }
+a.btn_01                                        { display:block; text-align:center; background:#F6921E; color:#000; padding:10px; text-decoration:none; border:0 none;}
+a.btn_01:hover                                  { background:#01A1AE; color:#000; border:0 none;}
+a.btn_01 em                                     { font-style:normal; display:block; }
+a.btn_01 span                                   { color:#fff; }
+.lt .box-more                                   { text-align:center; padding:5px 10px; }
+.lt .box-more.border                            { border:1px solid #ccc;}
+.lt .box-more p                                 { cursor:pointer; background:url(../images/arrow_02.jpg) no-repeat right center; padding-right:20px; }
+a.btn_01, .box-more                             { width:80%; margin:0 auto 20px; }
+.lt .box-more ul.col                            { width:30%; margin:0; padding:0; vertical-align:top; text-align:left; display:inline-block;}
+.lt .box-more .clearfix                         { display:none; }
+.lt .box-more ul.col li                         { list-style:none outside; }
+.lt .box-more ul.col li a                       { color:#B3B3B3; text-decoration:none; border:0 none;}
+.lt .box-more ul.col li a:hover                 { color:#000;}
+.article img						            { margin-bottom:1em; max-width:100%;}
+a.videolink					                    { border: 0 none; display:block; width:367px; height:207px; background:url(../images/video_image_hover.png) no-repeat; text-decoration:none;}
+a.videolink:hover				                { background:url(../images/video_image.png)no-repeat; text-decoration:none; border:0 none;}
+.container .full								{ position:relative;}
+
+
+
+/* resources*/
+.resources .categories .clear 	                { color: #000000; float: right; margin-right: 4px;}
+.resources  a, .resources  a:hover              { border:0 none;}
+.resources .categories ul 	                    { margin:0;padding:0;}
+.resources .categories ul li                    { float: left; list-style:none outside;}
+.resources .categories .title                   { margin-bottom: 0.5em; }
+.resources .categories ul li a                  { color: #000000;   margin-right: 22px; text-decoration: none; }
+.resources .categories ul li a:hover, 
+.resources .categories ul li a.selected         { color: #000000 }
+.resources .categories ul li.inactive           { opacity: 0.3; }
+.resources .categories ul li.active             { font-weight: bold; opacity: 1; }
+.resources .list                                { line-height: 1em; margin-top: 60px; position: relative; width:855px; }
+.resources .list .resource-wrapper.first .resource      { margin-left: 0; }
+.resources .list .resource-wrapper              { float: left; height: 250px; margin-bottom: 22px; margin-right: 35px; overflow: hidden; position: relative; width: 250px; }
+.resources .list .resource-wrapper.first        { margin-left: 0; }
+.resources .list .resource-wrapper.hidden       { display: none; }
+.resources .list .resource                      { border: 1px solid #000000; height: 188px; overflow: hidden; padding: 30px; }
+.resources .list .resource .date                { color: #808080; margin-bottom: 3px; }
+.resources .list .resource .description         { transition:color top 0.35s ease-in-out 0s; -moz-transition: top 0.35s ease-in-out 0s; -webkit-transition: top 0.35s ease-in-out 0s;  	-o-transition: top 0.35s ease-in-out 0s; color: #FFFFFF; font-size: 1.1em; height: 150px; margin-left: -30px; padding: 30px; position: absolute; top: -270px; width: 190px; }
+.resources .list .resource .title               { line-height: 1.4em; }
+.resources .list .resource .category            { color: #808080; margin-top: 30px; }
+.resources .list .resource .category a          { color: #808080; }
+.resources .list .resource .download            { bottom: 0; cursor: pointer; font-size: 1.1em; margin-bottom: 3px; margin-left: -10px; position: absolute; width: 190px; }
+.resources .list .resource .download a          { color: #000000; display: block; padding: 5px 5px 5px 15px; text-decoration: none; }
+.resources .list .resource .download a:hover, 
+.resources .list .resource .download a .hovered { color: #FF5D00;}
+.resources .list .resource .download a:hover .download-image, 
+.resources .list .resource .download a .hovered .download-image { background-image: url(../images/resource_down_arrow-active.png); }
+.resources .list .resource .download a .download-image { background: url(../images/resource_down_arrow.png) no-repeat; display: block; float: left; height: 30px; margin-right: 10px; margin-top: -7px; width: 30px; }
+.resources .list .resource .download img        { margin-right: 10px; vertical-align: middle;}
+.resources .list .resource:hover .description, 
+.resources .list .resource .hover .description { display: block; top: 0; }
+.resources .list .resource-cat-1.resource               { border-color: #4085A5  }
+.resources .list .resource-cat-1.resource .title        { color: #4085A5 }
+.resources .list .resource-cat-1.resource .description  { background-color: #4085A5 }
+.resources   .resource-cat-1.filter-item a              { color: #4085A5  }
+.resources .list .resource-cat-2.resource               { border-color: #FF6F00  }
+.resources .list .resource-cat-2.resource .title        { color: #FF6F00  }
+.resources .list .resource-cat-2.resource .description  { background-color: #FF6F00  }
+.resources  .resource-cat-2.filter-item a               { color: #FF6F00  }
+
+table											{ width:100%;}
+table th, table td								{ padding:10px;  }
+table td 										{ border-top: 1px solid #DDDDDD; }
+table td.consumed 								{ color: #9D261D; }
+
+.zebra-striped tbody tr:nth-child(2n+1) td, 
+.zebra-striped tbody tr:nth-child(2n+1) th 		{ background-color: #F9F9F9; }
+.zebra-striped tbody tr:hover td, 
+.zebra-striped tbody tr:hover th 				{ background-color: #F5F5F5; }
+
+.buttons-list.fixpos 							{ position:absolute; bottom:0; right:0; }
+.button.back.right 								{ right: 0; }
+.buttons-list .button 							{ margin-left: 10px; }
+.button.back 									{  z-index: 500; }
+a.button 										{ border:0 none;  color: #FFFFFF;  display: block;  text-align: center; background-color: #3582AC; letter-spacing: 1px;  line-height: 22px; padding: 0.8em 22px; text-decoration: none;}
+a.button:hover								 	{ background-color: #F89A1C; border:0 none; color:#fff;}
+
+/*pagination*/
+.pagination a                                   { border:0 none;}
+.pagination .next-prev                          { float:left; }
+.pagination .nums                               { text-align:right;}
+.pagination .nums span                          { color:#F89A1C;}
+                    
+
diff --git a/snf-astakos-app/astakos/im/static/im/images/accounts-logo.png b/snf-astakos-app/astakos/im/static/im/images/accounts-logo.png
new file mode 100644
index 0000000..765058c
Binary files /dev/null and b/snf-astakos-app/astakos/im/static/im/images/accounts-logo.png differ
diff --git a/snf-astakos-app/astakos/im/static/im/images/black-line.jpg b/snf-astakos-app/astakos/im/static/im/images/black-line.jpg
new file mode 100644
index 0000000..fc27f69
Binary files /dev/null and b/snf-astakos-app/astakos/im/static/im/images/black-line.jpg differ
diff --git a/snf-astakos-app/astakos/im/static/im/images/pictures/signup_pic.png b/snf-astakos-app/astakos/im/static/im/images/pictures/signup_pic.png
index 617e72a..b1b2627 100644
Binary files a/snf-astakos-app/astakos/im/static/im/images/pictures/signup_pic.png and b/snf-astakos-app/astakos/im/static/im/images/pictures/signup_pic.png differ
diff --git a/snf-astakos-app/astakos/im/static/im/images/porta.png b/snf-astakos-app/astakos/im/static/im/images/porta.png
new file mode 100644
index 0000000..50947a6
Binary files /dev/null and b/snf-astakos-app/astakos/im/static/im/images/porta.png differ
diff --git a/snf-astakos-app/astakos/im/static/im/images/question-mark.jpg b/snf-astakos-app/astakos/im/static/im/images/question-mark.jpg
new file mode 100644
index 0000000..6096ffc
Binary files /dev/null and b/snf-astakos-app/astakos/im/static/im/images/question-mark.jpg differ
diff --git a/snf-astakos-app/astakos/im/static/im/js/common.js b/snf-astakos-app/astakos/im/static/im/js/common.js
new file mode 100644
index 0000000..d0e6174
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/js/common.js
@@ -0,0 +1,76 @@
+function setContainerMinHeight(){
+
+    var h = $('.header').height();
+    var f = $('.footer').height();
+    var w = $(window).height();
+    var pTop = parseInt (($('.container .wrapper').css('padding-top').replace("px", "")) );
+    var pBottom = parseInt (($('.container .wrapper').css('padding-bottom').replace("px", "")));
+
+    var c = w - ( h+f+pTop+pBottom);
+    $('.container .wrapper').css('min-height', c);
+    
+
+}
+
+$(document).ready(function() {
+
+	setContainerMinHeight();
+	
+    $('.show-extra').click(function(e) {
+        e.preventDefault();
+        
+        $(this).parents('.bg-wrap').find('.extra').toggle('slow');
+        $('.hide-extra').toggle();    
+    });
+    $('.hide-extra').click(function(e) {
+        e.preventDefault();
+        $(this).hide();
+        $(this).parents('.bg-wrap').find('.extra').hide('slow');
+    });
+    
+    $('.box-more p').click(function(e) {
+        $(this).siblings('.clearfix').toggle('slow');
+        $(this).parents('.box-more').toggleClass('border');
+    });
+	
+		
+	$('.top-msg a.close').click(function(e) {
+        e.preventDefault();
+        $(this).parents('.top-msg').slideUp('5000', function() {
+             $('.top-msg').removeClass('active')
+        });
+    });
+    
+    //$('select').dropkick();
+    
+  
+    if ( $('#os').length > 0 ) {
+       var os = BrowserDetect.OS;
+       if ( os!=="an unknown OS" ) {
+           $('#os').html('version '+os);
+        }
+    }
+    
+    $('.top-msg .success').parents('.top-msg').css(
+    	{
+    		backgroundColor: '#f3c',
+    		color: '#fff'
+    	}
+    )
+    
+    $('.top-msg .error').parents('.top-msg').css(
+    	{
+    		backgroundColor: 'red',
+    		color: '#fff'
+    	}
+    )
+    
+    
+    $('.top-msg .warning').parents('.top-msg').css(
+    	{
+    		backgroundColor: '#90f',
+    		color: '#fff'
+    	}
+    )
+    
+});
diff --git a/snf-astakos-app/astakos/im/static/im/js/html5shiv-printshiv.js b/snf-astakos-app/astakos/im/static/im/js/html5shiv-printshiv.js
new file mode 100644
index 0000000..67db706
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/js/html5shiv-printshiv.js
@@ -0,0 +1,267 @@
+/*! HTML5 Shiv v3 | @jon_neal @afarkas @rem | MIT/GPL2 Licensed */
+(function (win, doc) {
+	// feature detection: whether the browser supports unknown elements
+	var supportsUnknownElements = (function (a) {
+		a.innerHTML = '<x-element></x-element>';
+		return a.childNodes.length === 1;
+	})(doc.createElement('a'));
+
+	// feature detection: whether the browser supports default html5 styles
+	var supportsHtml5Styles = (function (nav, docEl, compStyle) {
+		docEl.appendChild(nav);
+		return (compStyle = (compStyle ? compStyle(nav) : nav.currentStyle).display) && docEl.removeChild(nav) && compStyle === 'block';
+	})(doc.createElement('nav'), doc.documentElement, win.getComputedStyle);
+
+	// html5 global so that more elements can be shived and also so that existing shiving can be detected on iframes
+	// more elements can be added and shived with the following code: html5.elements.push('element-name'); shivDocument(document);
+	var html5 = {
+		// a list of html5 elements
+		elements: 'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video'.split(' '),
+
+		// the shiv function
+		shivDocument: function (scopeDocument) {
+			scopeDocument = scopeDocument || doc;
+
+			// test if the document has already been shived
+			if (scopeDocument.documentShived) {
+				return;
+			}
+			scopeDocument.documentShived = true;
+
+			// set local variables
+			var
+			documentCreateElement = scopeDocument.createElement,
+			documentCreateDocumentFragment = scopeDocument.createDocumentFragment,
+			documentHead = scopeDocument.getElementsByTagName('head')[0],
+			documentCreateElementReplaceFunction = function (m) {
+				documentCreateElement(m);
+			};
+
+			// shiv for unknown elements
+			if (!supportsUnknownElements) {
+				// shiv the document
+				html5.elements.join(' ').replace(/\w+/g, documentCreateElementReplaceFunction);
+
+				// shiv document create element function
+				scopeDocument.createElement = function (nodeName) {
+					var element = documentCreateElement(nodeName);
+					if (element.canHaveChildren){
+						html5.shivDocument(element.document);
+					} 
+					return element;
+				};
+
+				// shiv document create element function
+				scopeDocument.createDocumentFragment = function () {
+					return html5.shivDocument(documentCreateDocumentFragment());
+				};
+			}
+
+			// shiv for default html5 styles
+			if (!supportsHtml5Styles && documentHead) {
+				var div = documentCreateElement('div');
+				div.innerHTML = ['x<style>',
+					'article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}', // Corrects block display not defined in IE6/7/8/9
+					'audio{display:none}', // Corrects audio display not defined in IE6/7/8/9
+					'canvas,video{display:inline-block;*display:inline;*zoom:1}', // Corrects canvas and video display not defined in IE6/7/8/9 (audio[controls] in IE7)
+					'[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}', // Corrects 'hidden' attribute and audio[controls] display not present in IE7/8/9
+					'mark{background:#FF0;color:#000}', // Addresses styling not present in IE6/7/8/9
+				'</style>'].join('');
+				documentHead.insertBefore(div.lastChild, documentHead.firstChild);
+			}
+
+			// return document (for potential chaining)
+			return scopeDocument;
+		}
+	};
+
+	// shiv the document
+	html5.shivDocument(doc);
+
+	win.html5 = html5;
+
+	// ie print shiv
+	if (supportsUnknownElements || !win.attachEvent){return;}
+
+	// replaces an element with a namespace-shived clone (eg. header element becomes shiv:header element)
+	function namespaceShivElement(element) {
+		var elementClone, a, l, i;
+		if (doc.documentMode > 7) {
+			elementClone = doc.createElement('font');
+			elementClone.setAttribute('data-html5shiv', element.nodeName.toLowerCase());
+		}
+		else {
+			elementClone = doc.createElement('shiv:' + element.nodeName);
+		}
+		while (element.firstChild) {
+			elementClone.appendChild(element.childNodes[0]);
+		}
+		for (a = element.attributes, l = a.length, i = 0; i < l; ++i) {
+			if (a[i].specified) {
+				elementClone.setAttribute(a[i].nodeName, a[i].nodeValue);
+			}
+		}
+		elementClone.style.cssText = element.style.cssText;
+		element.parentNode.replaceChild(elementClone, element);
+		elementClone.originalElement = element;
+	}
+
+	// restores an element from a namespace-shived clone (eg. shiv:header element becomes header element)
+	function unNamespaceShivElement(element) {
+		var originalElement = element.originalElement;
+		while (element.childNodes.length) {
+			originalElement.appendChild(element.childNodes[0]);
+		}
+		element.parentNode.replaceChild(originalElement, element);
+	}
+
+	// get style sheet list css text
+	function getStyleSheetListCssText(styleSheetList, mediaType) {
+		// set media type
+		mediaType = mediaType || 'all';
+
+		// set local variables
+		var
+		i = -1,
+		cssTextArr = [],
+		styleSheetListLength = styleSheetList.length,
+		styleSheet,
+		styleSheetMediaType;
+
+		// loop through style sheets
+		while (++i < styleSheetListLength) {
+			// get style sheet
+			styleSheet = styleSheetList[i];
+
+			// get style sheet media type
+			styleSheetMediaType = styleSheet.media || mediaType;
+
+			// skip a disabled or non-print style sheet
+			if (styleSheet.disabled || !(/print|all/.test(styleSheetMediaType))) {
+				continue;
+			}
+
+			// push style sheet css text
+			cssTextArr.push(getStyleSheetListCssText(styleSheet.imports, styleSheetMediaType), styleSheet.cssText);
+		}
+
+		// return css text
+		return cssTextArr.join('');
+	}
+
+	// shiv css text (eg. header {} becomes shiv\:header {})
+	function shivCssText (cssText) {
+		// set local variables
+		var
+		elementsRegExp = new RegExp('(^|[\\s,{}])(' + win.html5.elements.join('|') + ')', 'gi'),
+		cssTextSplit = cssText.split('{'),
+		cssTextSplitLength = cssTextSplit.length,
+		i = -1;
+
+		// shiv css text
+		while (++i < cssTextSplitLength) {
+			cssTextSplit[i] = cssTextSplit[i].split('}');
+			if (doc.documentMode > 7) {
+				cssTextSplit[i][cssTextSplit[i].length - 1] = cssTextSplit[i][cssTextSplit[i].length - 1].replace(elementsRegExp, '$1font[data-html5shiv="$2"]');
+			}
+			else {
+				cssTextSplit[i][cssTextSplit[i].length - 1] = cssTextSplit[i][cssTextSplit[i].length - 1].replace(elementsRegExp, '$1shiv\\:$2');
+			}
+			cssTextSplit[i] = cssTextSplit[i].join('}');
+		}
+
+		// return shived css text
+		return cssTextSplit.join('{');
+	}
+
+	// the before print function
+	win.attachEvent(
+		'onbeforeprint',
+		function () {
+			// test for scenarios where shiving is unnecessary or unavailable
+			if (win.html5.supportsXElement || !doc.namespaces) {
+				return;
+			}
+
+			// add the shiv namespace
+			if (!doc.namespaces.shiv) {
+				doc.namespaces.add('shiv');
+			}
+
+			// set local variables
+			var
+			i = -1,
+			elementsRegExp = new RegExp('^(' + win.html5.elements.join('|') + ')$', 'i'),
+			nodeList = doc.getElementsByTagName('*'),
+			nodeListLength = nodeList.length,
+			element,
+			// sorts style and link files and returns their stylesheets
+			shivedCSS = shivCssText(getStyleSheetListCssText((function (s, l) {
+				var arr = [], i = s.length;
+				while (i) {
+					arr.unshift(s[--i]);
+				}
+				i = l.length;
+				while (i) {
+					arr.unshift(l[--i]);
+				}
+				arr.sort(function (a, b) {
+					return (a.sourceIndex - b.sourceIndex);
+				});
+				i = arr.length;
+				while (i) {
+					arr[--i] = arr[i].styleSheet;
+				}
+				return arr;
+			})(doc.getElementsByTagName('style'), doc.getElementsByTagName('link'))));
+
+			// loop through document elements
+			while (++i < nodeListLength) {
+				// get element
+				element = nodeList[i];
+
+				// clone matching elements as shiv namespaced
+				if (elementsRegExp.test(element.nodeName)) {
+					namespaceShivElement(element);
+				}
+			}
+
+			// set new shived css text
+			doc.appendChild(doc._shivedStyleSheet = doc.createElement('style')).styleSheet.cssText = shivedCSS;
+		}
+	);
+
+	// the after print function
+	win.attachEvent(
+		'onafterprint',
+		function() {
+			// test for scenarios where shiving is unnecessary
+			if (win.html5.supportsXElement || !doc.namespaces) {
+				return;
+			}
+
+			// set local variables
+			var
+			i = -1,
+			nodeList = doc.getElementsByTagName('*'),
+			nodeListLength = nodeList.length,
+			element;
+
+			// loop through document elements
+			while (++i < nodeListLength) {
+				// get element
+				element = nodeList[i];
+
+				// restore original elements
+				if (element.originalElement) {
+					unNamespaceShivElement(element);
+				}
+			}
+
+			// cut new shived css text
+			if (doc._shivedStyleSheet) {
+				doc._shivedStyleSheet.parentNode.removeChild(doc._shivedStyleSheet);
+			}
+		}
+	);
+})(this, document);
\ No newline at end of file
diff --git a/snf-astakos-app/astakos/im/static/im/js/jqModal.js b/snf-astakos-app/astakos/im/static/im/js/jqModal.js
new file mode 100644
index 0000000..3aac816
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/js/jqModal.js
@@ -0,0 +1,69 @@
+/*
+ * jqModal - Minimalist Modaling with jQuery
+ *   (http://dev.iceburg.net/jquery/jqModal/)
+ *
+ * Copyright (c) 2007,2008 Brice Burgess <bhb@iceburg.net>
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ * 
+ * $Version: 03/01/2009 +r14
+ */
+(function($) {
+$.fn.jqm=function(o){
+var p={
+overlay: 50,
+overlayClass: 'jqmOverlay',
+closeClass: 'jqmClose',
+trigger: '.jqModal',
+ajax: F,
+ajaxText: '',
+target: F,
+modal: F,
+toTop: F,
+onShow: F,
+onHide: F,
+onLoad: F
+};
+return this.each(function(){if(this._jqm)return H[this._jqm].c=$.extend({},H[this._jqm].c,o);s++;this._jqm=s;
+H[s]={c:$.extend(p,$.jqm.params,o),a:F,w:$(this).addClass('jqmID'+s),s:s};
+if(p.trigger)$(this).jqmAddTrigger(p.trigger);
+});};
+
+$.fn.jqmAddClose=function(e){return hs(this,e,'jqmHide');};
+$.fn.jqmAddTrigger=function(e){return hs(this,e,'jqmShow');};
+$.fn.jqmShow=function(t){return this.each(function(){t=t||window.event;$.jqm.open(this._jqm,t);});};
+$.fn.jqmHide=function(t){return this.each(function(){t=t||window.event;$.jqm.close(this._jqm,t)});};
+
+$.jqm = {
+hash:{},
+open:function(s,t){var h=H[s],c=h.c,cc='.'+c.closeClass,z=(parseInt(h.w.css('z-index'))),z=(z>0)?z:3000,o=$('<div></div>').css({height:'100%',width:'100%',position:'fixed',left:0,top:0,'z-index':z-1,opacity:c.overlay/100});if(h.a)return F;h.t=t;h.a=true;h.w.css('z-index',z);
+ if(c.modal) {if(!A[0])L('bind');A.push(s);}
+ else if(c.overlay > 0)h.w.jqmAddClose(o);
+ else o=F;
+
+ h.o=(o)?o.addClass(c.overlayClass).prependTo('body'):F;
+ if(ie6){$('html,body').css({height:'100%',width:'100%'});if(o){o=o.css({position:'absolute'})[0];for(var y in {Top:1,Left:1})o.style.setExpression(y.toLowerCase(),"(_=(document.documentElement.scroll"+y+" || document.body.scroll"+y+"))+'px'");}}
+
+ if(c.ajax) {var r=c.target||h.w,u=c.ajax,r=(typeof r == 'string')?$(r,h.w):$(r),u=(u.substr(0,1) == '@')?$(t).attr(u.substring(1)):u;
+  r.html(c.ajaxText).load(u,function(){if(c.onLoad)c.onLoad.call(this,h);if(cc)h.w.jqmAddClose($(cc,h.w));e(h);});}
+ else if(cc)h.w.jqmAddClose($(cc,h.w));
+
+ if(c.toTop&&h.o)h.w.before('<span id="jqmP'+h.w[0]._jqm+'"></span>').insertAfter(h.o);	
+ (c.onShow)?c.onShow(h):h.w.show();e(h);return F;
+},
+close:function(s){var h=H[s];if(!h.a)return F;h.a=F;
+ if(A[0]){A.pop();if(!A[0])L('unbind');}
+ if(h.c.toTop&&h.o)$('#jqmP'+h.w[0]._jqm).after(h.w).remove();
+ if(h.c.onHide)h.c.onHide(h);else{h.w.hide();if(h.o)h.o.remove();} return F;
+},
+params:{}};
+var s=0,H=$.jqm.hash,A=[],ie6=$.browser.msie&&($.browser.version == "6.0"),F=false,
+i=$('<iframe src="javascript:false;document.write(\'\');" class="jqm"></iframe>').css({opacity:0}),
+e=function(h){if(ie6)if(h.o)h.o.html('<p style="width:100%;height:100%"/>').prepend(i);else if(!$('iframe.jqm',h.w)[0])h.w.prepend(i); f(h);},
+f=function(h){try{$(':input:visible',h.w)[0].focus();}catch(_){}},
+L=function(t){$()[t]("keypress",m)[t]("keydown",m)[t]("mousedown",m);},
+m=function(e){var h=H[A[A.length-1]],r=(!$(e.target).parents('.jqmID'+h.s)[0]);if(r)f(h);return !r;},
+hs=function(w,t,c){return w.each(function(){var s=this._jqm;$(t).each(function() {
+ if(!this[c]){this[c]=[];$(this).click(function(){for(var i in {jqmShow:1,jqmHide:1})for(var s in this[i])if(H[this[i][s]])H[this[i][s]].w[i](this);return F;});}this[c].push(s);});});};
+})(jQuery);
\ No newline at end of file
diff --git a/snf-astakos-app/astakos/im/static/im/js/jquery.colorbox.js b/snf-astakos-app/astakos/im/static/im/js/jquery.colorbox.js
new file mode 100644
index 0000000..a82c6af
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/js/jquery.colorbox.js
@@ -0,0 +1,888 @@
+// ColorBox v1.3.19 - jQuery lightbox plugin
+// (c) 2011 Jack Moore - jacklmoore.com
+// License: http://www.opensource.org/licenses/mit-license.php
+(function ($, document, window) {
+    var
+    // Default settings object.	
+    // See http://jacklmoore.com/colorbox for details.
+    defaults = {
+        transition: "elastic",
+        speed: 300,
+        width: false,
+        initialWidth: "600",
+        innerWidth: false,
+        maxWidth: false,
+        height: false,
+        initialHeight: "450",
+        innerHeight: false,
+        maxHeight: false,
+        scalePhotos: true,
+        scrolling: true,
+        inline: false,
+        html: false,
+        iframe: false,
+        fastIframe: true,
+        photo: false,
+        href: false,
+        title: false,
+        rel: false,
+        opacity: 0.9,
+        preloading: true,
+        current: "image {current} of {total}",
+        previous: "previous",
+        next: "next",
+        close: "close",
+        open: false,
+        returnFocus: true,
+        reposition: true,
+        loop: true,
+        slideshow: false,
+        slideshowAuto: true,
+        slideshowSpeed: 2500,
+        slideshowStart: "start slideshow",
+        slideshowStop: "stop slideshow",
+        onOpen: false,
+        onLoad: false,
+        onComplete: false,
+        onCleanup: false,
+        onClosed: false,
+        overlayClose: true,		
+        escKey: true,
+        arrowKey: true,
+        top: false,
+        bottom: false,
+        left: false,
+        right: false,
+        fixed: false,
+        data: undefined
+    },
+	
+    // Abstracting the HTML and event identifiers for easy rebranding
+    colorbox = 'colorbox',
+    prefix = 'cbox',
+    boxElement = prefix + 'Element',
+    
+    // Events	
+    event_open = prefix + '_open',
+    event_load = prefix + '_load',
+    event_complete = prefix + '_complete',
+    event_cleanup = prefix + '_cleanup',
+    event_closed = prefix + '_closed',
+    event_purge = prefix + '_purge',
+    
+    // Special Handling for IE
+    isIE = !$.support.opacity && !$.support.style, // IE7 & IE8
+    isIE6 = isIE && !window.XMLHttpRequest, // IE6
+    event_ie6 = prefix + '_IE6',
+
+    // Cached jQuery Object Variables
+    $overlay,
+    $box,
+    $wrap,
+    $content,
+    $topBorder,
+    $leftBorder,
+    $rightBorder,
+    $bottomBorder,
+    $related,
+    $window,
+    $loaded,
+    $loadingBay,
+    $loadingOverlay,
+    $title,
+    $current,
+    $slideshow,
+    $next,
+    $prev,
+    $close,
+    $groupControls,
+    
+    // Variables for cached values or use across multiple functions
+    settings,
+    interfaceHeight,
+    interfaceWidth,
+    loadedHeight,
+    loadedWidth,
+    element,
+    index,
+    photo,
+    open,
+    active,
+    closing,
+    loadingTimer,
+    publicMethod,
+    div = "div",
+    init;
+
+	// ****************
+	// HELPER FUNCTIONS
+	// ****************
+    
+	// Convience function for creating new jQuery objects
+    function $tag(tag, id, css) {
+		var element = document.createElement(tag);
+
+		if (id) {
+			element.id = prefix + id;
+		}
+
+		if (css) {
+			element.style.cssText = css;
+		}
+
+		return $(element);
+    }
+
+	// Determine the next and previous members in a group.
+	function getIndex(increment) {
+		var 
+		max = $related.length, 
+		newIndex = (index + increment) % max;
+		
+		return (newIndex < 0) ? max + newIndex : newIndex;
+	}
+
+	// Convert '%' and 'px' values to integers
+	function setSize(size, dimension) {
+		return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : $window.height()) / 100) : 1) * parseInt(size, 10));
+	}
+	
+	// Checks an href to see if it is a photo.
+	// There is a force photo option (photo: true) for hrefs that cannot be matched by this regex.
+	function isImage(url) {
+		return settings.photo || /\.(gif|png|jpe?g|bmp|ico)((#|\?).*)?$/i.test(url);
+	}
+	
+	// Assigns function results to their respective properties
+	function makeSettings() {
+        var i;
+        settings = $.extend({}, $.data(element, colorbox));
+        
+		for (i in settings) {
+			if ($.isFunction(settings[i]) && i.slice(0, 2) !== 'on') { // checks to make sure the function isn't one of the callbacks, they will be handled at the appropriate time.
+			    settings[i] = settings[i].call(element);
+			}
+		}
+        
+		settings.rel = settings.rel || element.rel || 'nofollow';
+		settings.href = settings.href || $(element).attr('href');
+		settings.title = settings.title || element.title;
+        
+        if (typeof settings.href === "string") {
+            settings.href = $.trim(settings.href);
+        }
+	}
+
+	function trigger(event, callback) {
+		$.event.trigger(event);
+		if (callback) {
+			callback.call(element);
+		}
+	}
+
+	// Slideshow functionality
+	function slideshow() {
+		var
+		timeOut,
+		className = prefix + "Slideshow_",
+		click = "click." + prefix,
+		start,
+		stop,
+		clear;
+		
+		if (settings.slideshow && $related[1]) {
+			start = function () {
+				$slideshow
+					.text(settings.slideshowStop)
+					.unbind(click)
+					.bind(event_complete, function () {
+						if (settings.loop || $related[index + 1]) {
+							timeOut = setTimeout(publicMethod.next, settings.slideshowSpeed);
+						}
+					})
+					.bind(event_load, function () {
+						clearTimeout(timeOut);
+					})
+					.one(click + ' ' + event_cleanup, stop);
+				$box.removeClass(className + "off").addClass(className + "on");
+				timeOut = setTimeout(publicMethod.next, settings.slideshowSpeed);
+			};
+			
+			stop = function () {
+				clearTimeout(timeOut);
+				$slideshow
+					.text(settings.slideshowStart)
+					.unbind([event_complete, event_load, event_cleanup, click].join(' '))
+					.one(click, function () {
+						publicMethod.next();
+						start();
+					});
+				$box.removeClass(className + "on").addClass(className + "off");
+			};
+			
+			if (settings.slideshowAuto) {
+				start();
+			} else {
+				stop();
+			}
+		} else {
+            $box.removeClass(className + "off " + className + "on");
+        }
+	}
+
+	function launch(target) {
+		if (!closing) {
+			
+			element = target;
+			
+			makeSettings();
+			
+			$related = $(element);
+			
+			index = 0;
+			
+			if (settings.rel !== 'nofollow') {
+				$related = $('.' + boxElement).filter(function () {
+					var relRelated = $.data(this, colorbox).rel || this.rel;
+					return (relRelated === settings.rel);
+				});
+				index = $related.index(element);
+				
+				// Check direct calls to ColorBox.
+				if (index === -1) {
+					$related = $related.add(element);
+					index = $related.length - 1;
+				}
+			}
+			
+			if (!open) {
+				open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys.
+				
+				$box.show();
+				
+				if (settings.returnFocus) {
+					$(element).blur().one(event_closed, function () {
+						$(this).focus();
+					});
+				}
+				
+				// +settings.opacity avoids a problem in IE when using non-zero-prefixed-string-values, like '.5'
+				$overlay.css({"opacity": +settings.opacity, "cursor": settings.overlayClose ? "pointer" : "auto"}).show();
+				
+				// Opens inital empty ColorBox prior to content being loaded.
+				settings.w = setSize(settings.initialWidth, 'x');
+				settings.h = setSize(settings.initialHeight, 'y');
+				publicMethod.position();
+				
+				if (isIE6) {
+					$window.bind('resize.' + event_ie6 + ' scroll.' + event_ie6, function () {
+						$overlay.css({width: $window.width(), height: $window.height(), top: $window.scrollTop(), left: $window.scrollLeft()});
+					}).trigger('resize.' + event_ie6);
+				}
+				
+				trigger(event_open, settings.onOpen);
+				
+				$groupControls.add($title).hide();
+				
+				$close.html(settings.close).show();
+			}
+			
+			publicMethod.load(true);
+		}
+	}
+
+	// ColorBox's markup needs to be added to the DOM prior to being called
+	// so that the browser will go ahead and load the CSS background images.
+	function appendHTML() {
+		if (!$box && document.body) {
+			init = false;
+
+			$window = $(window);
+			$box = $tag(div).attr({id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : ''}).hide();
+			$overlay = $tag(div, "Overlay", isIE6 ? 'position:absolute' : '').hide();
+			$wrap = $tag(div, "Wrapper");
+			$content = $tag(div, "Content").append(
+				$loaded = $tag(div, "LoadedContent", 'width:0; height:0; overflow:hidden'),
+				$loadingOverlay = $tag(div, "LoadingOverlay").add($tag(div, "LoadingGraphic")),
+				$title = $tag(div, "Title"),
+				$current = $tag(div, "Current"),
+				$next = $tag(div, "Next"),
+				$prev = $tag(div, "Previous"),
+				$slideshow = $tag(div, "Slideshow").bind(event_open, slideshow),
+				$close = $tag(div, "Close")
+			);
+			
+			$wrap.append( // The 3x3 Grid that makes up ColorBox
+				$tag(div).append(
+					$tag(div, "TopLeft"),
+					$topBorder = $tag(div, "TopCenter"),
+					$tag(div, "TopRight")
+				),
+				$tag(div, false, 'clear:left').append(
+					$leftBorder = $tag(div, "MiddleLeft"),
+					$content,
+					$rightBorder = $tag(div, "MiddleRight")
+				),
+				$tag(div, false, 'clear:left').append(
+					$tag(div, "BottomLeft"),
+					$bottomBorder = $tag(div, "BottomCenter"),
+					$tag(div, "BottomRight")
+				)
+			).find('div div').css({'float': 'left'});
+			
+			$loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none');
+			
+			$groupControls = $next.add($prev).add($current).add($slideshow);
+
+			$(document.body).append($overlay, $box.append($wrap, $loadingBay));
+		}
+	}
+
+	// Add ColorBox's event bindings
+	function addBindings() {
+		if ($box) {
+			if (!init) {
+				init = true;
+
+				// Cache values needed for size calculations
+				interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height();//Subtraction needed for IE6
+				interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width();
+				loadedHeight = $loaded.outerHeight(true);
+				loadedWidth = $loaded.outerWidth(true);
+				
+				// Setting padding to remove the need to do size conversions during the animation step.
+				$box.css({"padding-bottom": interfaceHeight, "padding-right": interfaceWidth});
+
+				// Anonymous functions here keep the public method from being cached, thereby allowing them to be redefined on the fly.
+				$next.click(function () {
+					publicMethod.next();
+				});
+				$prev.click(function () {
+					publicMethod.prev();
+				});
+				$close.click(function () {
+					publicMethod.close();
+				});
+				$overlay.click(function () {
+					if (settings.overlayClose) {
+						publicMethod.close();
+					}
+				});
+				
+				// Key Bindings
+				$(document).bind('keydown.' + prefix, function (e) {
+					var key = e.keyCode;
+					if (open && settings.escKey && key === 27) {
+						e.preventDefault();
+						publicMethod.close();
+					}
+					if (open && settings.arrowKey && $related[1]) {
+						if (key === 37) {
+							e.preventDefault();
+							$prev.click();
+						} else if (key === 39) {
+							e.preventDefault();
+							$next.click();
+						}
+					}
+				});
+
+				$('.' + boxElement, document).live('click', function (e) {
+			        // ignore non-left-mouse-clicks and clicks modified with ctrl / command, shift, or alt.
+			        // See: http://jacklmoore.com/notes/click-events/
+			        if (!(e.which > 1 || e.shiftKey || e.altKey || e.metaKey)) {
+			            e.preventDefault();
+			            launch(this);
+			        }
+			    });
+			}
+			return true;
+		}
+		return false;
+	}
+
+	// Don't do anything if ColorBox already exists.
+	if ($.colorbox) {
+		return;
+	}
+
+	// Append the HTML when the DOM loads
+	$(appendHTML);
+
+
+	// ****************
+	// PUBLIC FUNCTIONS
+	// Usage format: $.fn.colorbox.close();
+	// Usage from within an iframe: parent.$.fn.colorbox.close();
+	// ****************
+	
+	publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback) {
+		var $this = this;
+		
+        options = options || {};
+        
+        appendHTML();
+
+		if (addBindings()) {
+			if (!$this[0]) {
+				if ($this.selector) { // if a selector was given and it didn't match any elements, go ahead and exit.
+	                return $this;
+	            }
+	            // if no selector was given (ie. $.colorbox()), create a temporary element to work with
+				$this = $('<a/>');
+				options.open = true; // assume an immediate open
+			}
+			
+			if (callback) {
+				options.onComplete = callback;
+			}
+			
+			$this.each(function () {
+				$.data(this, colorbox, $.extend({}, $.data(this, colorbox) || defaults, options));
+			}).addClass(boxElement);
+			
+	        if (($.isFunction(options.open) && options.open.call($this)) || options.open) {
+				launch($this[0]);
+			}
+		}
+        
+		return $this;
+	};
+
+	publicMethod.position = function (speed, loadedCallback) {
+        var 
+        top = 0, 
+        left = 0, 
+        offset = $box.offset(),
+        scrollTop = $window.scrollTop(), 
+        scrollLeft = $window.scrollLeft();
+        
+        $window.unbind('resize.' + prefix);
+
+        // remove the modal so that it doesn't influence the document width/height        
+        $box.css({top: -9e4, left: -9e4});
+
+        if (settings.fixed && !isIE6) {
+			offset.top -= scrollTop;
+			offset.left -= scrollLeft;
+            $box.css({position: 'fixed'});
+        } else {
+            top = scrollTop;
+            left = scrollLeft;
+            $box.css({position: 'absolute'});
+        }
+
+		// keeps the top and left positions within the browser's viewport.
+        if (settings.right !== false) {
+            left += Math.max($window.width() - settings.w - loadedWidth - interfaceWidth - setSize(settings.right, 'x'), 0);
+        } else if (settings.left !== false) {
+            left += setSize(settings.left, 'x');
+        } else {
+            left += Math.round(Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2);
+        }
+        
+        if (settings.bottom !== false) {
+            top += Math.max($window.height() - settings.h - loadedHeight - interfaceHeight - setSize(settings.bottom, 'y'), 0);
+        } else if (settings.top !== false) {
+            top += setSize(settings.top, 'y');
+        } else {
+            top += Math.round(Math.max($window.height() - settings.h - loadedHeight - interfaceHeight, 0) / 2);
+        }
+
+        $box.css({top: offset.top, left: offset.left});
+
+		// setting the speed to 0 to reduce the delay between same-sized content.
+		speed = ($box.width() === settings.w + loadedWidth && $box.height() === settings.h + loadedHeight) ? 0 : speed || 0;
+        
+		// this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly,
+		// but it has to be shrank down around the size of div#colorbox when it's done.  If not,
+		// it can invoke an obscure IE bug when using iframes.
+		$wrap[0].style.width = $wrap[0].style.height = "9999px";
+		
+		function modalDimensions(that) {
+			$topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = that.style.width;
+			$content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = that.style.height;
+		}
+		
+		$box.dequeue().animate({width: settings.w + loadedWidth, height: settings.h + loadedHeight, top: top, left: left}, {
+			duration: speed,
+			complete: function () {
+				modalDimensions(this);
+				
+				active = false;
+				
+				// shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation.
+				$wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px";
+				$wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight) + "px";
+                
+                if (settings.reposition) {
+	                setTimeout(function () {  // small delay before binding onresize due to an IE8 bug.
+	                    $window.bind('resize.' + prefix, publicMethod.position);
+	                }, 1);
+	            }
+
+				if (loadedCallback) {
+					loadedCallback();
+				}
+			},
+			step: function () {
+				modalDimensions(this);
+			}
+		});
+	};
+
+	publicMethod.resize = function (options) {
+		if (open) {
+			options = options || {};
+			
+			if (options.width) {
+				settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth;
+			}
+			if (options.innerWidth) {
+				settings.w = setSize(options.innerWidth, 'x');
+			}
+			$loaded.css({width: settings.w});
+			
+			if (options.height) {
+				settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight;
+			}
+			if (options.innerHeight) {
+				settings.h = setSize(options.innerHeight, 'y');
+			}
+			if (!options.innerHeight && !options.height) {
+				$loaded.css({height: "auto"});
+				settings.h = $loaded.height();
+			}
+			$loaded.css({height: settings.h});
+			
+			publicMethod.position(settings.transition === "none" ? 0 : settings.speed);
+		}
+	};
+
+	publicMethod.prep = function (object) {
+		if (!open) {
+			return;
+		}
+		
+		var callback, speed = settings.transition === "none" ? 0 : settings.speed;
+		
+		$loaded.remove();
+		$loaded = $tag(div, 'LoadedContent').append(object);
+		
+		function getWidth() {
+			settings.w = settings.w || $loaded.width();
+			settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w;
+			return settings.w;
+		}
+		function getHeight() {
+			settings.h = settings.h || $loaded.height();
+			settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
+			return settings.h;
+		}
+		
+		$loaded.hide()
+		.appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations.
+		.css({width: getWidth(), overflow: settings.scrolling ? 'auto' : 'hidden'})
+		.css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height.
+		.prependTo($content);
+		
+		$loadingBay.hide();
+		
+		// floating the IMG removes the bottom line-height and fixed a problem where IE miscalculates the width of the parent element as 100% of the document width.
+		//$(photo).css({'float': 'none', marginLeft: 'auto', marginRight: 'auto'});
+		
+        $(photo).css({'float': 'none'});
+        
+		// Hides SELECT elements in IE6 because they would otherwise sit on top of the overlay.
+		if (isIE6) {
+			$('select').not($box.find('select')).filter(function () {
+				return this.style.visibility !== 'hidden';
+			}).css({'visibility': 'hidden'}).one(event_cleanup, function () {
+				this.style.visibility = 'inherit';
+			});
+		}
+		
+		callback = function () {
+            var preload, i, total = $related.length, iframe, frameBorder = 'frameBorder', allowTransparency = 'allowTransparency', complete, src, img;
+            
+            if (!open) {
+                return;
+            }
+            
+            function removeFilter() {
+                if (isIE) {
+                    $box[0].style.removeAttribute('filter');
+                }
+            }
+            
+            complete = function () {
+                clearTimeout(loadingTimer);
+                $loadingOverlay.hide();
+                trigger(event_complete, settings.onComplete);
+            };
+            
+            if (isIE) {
+                //This fadeIn helps the bicubic resampling to kick-in.
+                if (photo) {
+                    $loaded.fadeIn(100);
+                }
+            }
+            
+            $title.html(settings.title).add($loaded).show();
+            
+            if (total > 1) { // handle grouping
+                if (typeof settings.current === "string") {
+                    $current.html(settings.current.replace('{current}', index + 1).replace('{total}', total)).show();
+                }
+                
+                $next[(settings.loop || index < total - 1) ? "show" : "hide"]().html(settings.next);
+                $prev[(settings.loop || index) ? "show" : "hide"]().html(settings.previous);
+				
+                if (settings.slideshow) {
+                    $slideshow.show();
+                }
+				
+                // Preloads images within a rel group
+                if (settings.preloading) {
+					preload = [
+						getIndex(-1),
+						getIndex(1)
+					];
+					while (i = $related[preload.pop()]) {
+						src = $.data(i, colorbox).href || i.href;
+						if ($.isFunction(src)) {
+							src = src.call(i);
+						}
+						if (isImage(src)) {
+							img = new Image();
+							img.src = src;
+						}
+					}
+                }
+            } else {
+                $groupControls.hide();
+            }
+            
+            if (settings.iframe) {
+                iframe = $tag('iframe')[0];
+                
+                if (frameBorder in iframe) {
+                    iframe[frameBorder] = 0;
+                }
+                if (allowTransparency in iframe) {
+                    iframe[allowTransparency] = "true";
+                }
+                // give the iframe a unique name to prevent caching
+                iframe.name = prefix + (+new Date());
+                if (settings.fastIframe) {
+                    complete();
+                } else {
+                    $(iframe).one('load', complete);
+                }
+                iframe.src = settings.href;
+                if (!settings.scrolling) {
+                    iframe.scrolling = "no";
+                }
+                $(iframe).addClass(prefix + 'Iframe').appendTo($loaded).one(event_purge, function () {
+                    iframe.src = "//about:blank";
+                });
+            } else {
+                complete();
+            }
+            
+            if (settings.transition === 'fade') {
+                $box.fadeTo(speed, 1, removeFilter);
+            } else {
+                removeFilter();
+            }
+		};
+		
+		if (settings.transition === 'fade') {
+			$box.fadeTo(speed, 0, function () {
+				publicMethod.position(0, callback);
+			});
+		} else {
+			publicMethod.position(speed, callback);
+		}
+	};
+
+	publicMethod.load = function (launched) {
+		var href, setResize, prep = publicMethod.prep;
+		
+		active = true;
+		
+		photo = false;
+		
+		element = $related[index];
+		
+		if (!launched) {
+			makeSettings();
+		}
+		
+		trigger(event_purge);
+		
+		trigger(event_load, settings.onLoad);
+		
+		settings.h = settings.height ?
+				setSize(settings.height, 'y') - loadedHeight - interfaceHeight :
+				settings.innerHeight && setSize(settings.innerHeight, 'y');
+		
+		settings.w = settings.width ?
+				setSize(settings.width, 'x') - loadedWidth - interfaceWidth :
+				settings.innerWidth && setSize(settings.innerWidth, 'x');
+		
+		// Sets the minimum dimensions for use in image scaling
+		settings.mw = settings.w;
+		settings.mh = settings.h;
+		
+		// Re-evaluate the minimum width and height based on maxWidth and maxHeight values.
+		// If the width or height exceed the maxWidth or maxHeight, use the maximum values instead.
+		if (settings.maxWidth) {
+			settings.mw = setSize(settings.maxWidth, 'x') - loadedWidth - interfaceWidth;
+			settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw;
+		}
+		if (settings.maxHeight) {
+			settings.mh = setSize(settings.maxHeight, 'y') - loadedHeight - interfaceHeight;
+			settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh;
+		}
+		
+		href = settings.href;
+		
+        loadingTimer = setTimeout(function () {
+            $loadingOverlay.show();
+        }, 100);
+        
+		if (settings.inline) {
+			// Inserts an empty placeholder where inline content is being pulled from.
+			// An event is bound to put inline content back when ColorBox closes or loads new content.
+			$tag(div).hide().insertBefore($(href)[0]).one(event_purge, function () {
+				$(this).replaceWith($loaded.children());
+			});
+			prep($(href));
+		} else if (settings.iframe) {
+			// IFrame element won't be added to the DOM until it is ready to be displayed,
+			// to avoid problems with DOM-ready JS that might be trying to run in that iframe.
+			prep(" ");
+		} else if (settings.html) {
+			prep(settings.html);
+		} else if (isImage(href)) {
+			$(photo = new Image())
+			.addClass(prefix + 'Photo')
+			.error(function () {
+				settings.title = false;
+				prep($tag(div, 'Error').text('This image could not be loaded'));
+			})
+			.load(function () {
+				var percent;
+				photo.onload = null; //stops animated gifs from firing the onload repeatedly.
+				
+				if (settings.scalePhotos) {
+					setResize = function () {
+						photo.height -= photo.height * percent;
+						photo.width -= photo.width * percent;	
+					};
+					if (settings.mw && photo.width > settings.mw) {
+						percent = (photo.width - settings.mw) / photo.width;
+						setResize();
+					}
+					if (settings.mh && photo.height > settings.mh) {
+						percent = (photo.height - settings.mh) / photo.height;
+						setResize();
+					}
+				}
+				
+				if (settings.h) {
+					photo.style.marginTop = Math.max(settings.h - photo.height, 0) / 2 + 'px';
+				}
+				
+				if ($related[1] && (settings.loop || $related[index + 1])) {
+					photo.style.cursor = 'pointer';
+					photo.onclick = function () {
+                        publicMethod.next();
+                    };
+				}
+				
+				if (isIE) {
+					photo.style.msInterpolationMode = 'bicubic';
+				}
+				
+				setTimeout(function () { // A pause because Chrome will sometimes report a 0 by 0 size otherwise.
+					prep(photo);
+				}, 1);
+			});
+			
+			setTimeout(function () { // A pause because Opera 10.6+ will sometimes not run the onload function otherwise.
+				photo.src = href;
+			}, 1);
+		} else if (href) {
+			$loadingBay.load(href, settings.data, function (data, status, xhr) {
+				prep(status === 'error' ? $tag(div, 'Error').text('Request unsuccessful: ' + xhr.statusText) : $(this).contents());
+			});
+		}
+	};
+        
+	// Navigates to the next page/image in a set.
+	publicMethod.next = function () {
+		if (!active && $related[1] && (settings.loop || $related[index + 1])) {
+			index = getIndex(1);
+			publicMethod.load();
+		}
+	};
+	
+	publicMethod.prev = function () {
+		if (!active && $related[1] && (settings.loop || index)) {
+			index = getIndex(-1);
+			publicMethod.load();
+		}
+	};
+
+	// Note: to use this within an iframe use the following format: parent.$.fn.colorbox.close();
+	publicMethod.close = function () {
+		if (open && !closing) {
+			
+			closing = true;
+			
+			open = false;
+			
+			trigger(event_cleanup, settings.onCleanup);
+			
+			$window.unbind('.' + prefix + ' .' + event_ie6);
+			
+			$overlay.fadeTo(200, 0);
+			
+			$box.stop().fadeTo(300, 0, function () {
+                 
+				$box.add($overlay).css({'opacity': 1, cursor: 'auto'}).hide();
+				
+				trigger(event_purge);
+				
+				$loaded.remove();
+				
+				setTimeout(function () {
+					closing = false;
+					trigger(event_closed, settings.onClosed);
+				}, 1);
+			});
+		}
+	};
+
+	// Removes changes ColorBox made to the document, but does not remove the plugin
+	// from jQuery.
+	publicMethod.remove = function () {
+		$([]).add($box).add($overlay).remove();
+		$box = null;
+		$('.' + boxElement)
+			.removeData(colorbox)
+			.removeClass(boxElement)
+			.die();
+	};
+
+	// A method for fetching the current element ColorBox is referencing.
+	// returns a jQuery object.
+	publicMethod.element = function () {
+		return $(element);
+	};
+
+	publicMethod.settings = defaults;
+
+}(jQuery, document, this));
\ No newline at end of file
diff --git a/snf-astakos-app/astakos/im/static/im/js/jquery.dropkick-1.0.0.js b/snf-astakos-app/astakos/im/static/im/js/jquery.dropkick-1.0.0.js
new file mode 100644
index 0000000..aaffc4b
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/js/jquery.dropkick-1.0.0.js
@@ -0,0 +1,402 @@
+/**
+ * DropKick
+ *
+ * Highly customizable <select> lists
+ * https://github.com/JamieLottering/DropKick
+ *
+ * &copy; 2011 Jamie Lottering <http://github.com/JamieLottering>
+ *                        <http://twitter.com/JamieLottering>
+ * 
+ */
+(function ($, window, document) {
+
+  var ie6 = false;
+
+  // Help prevent flashes of unstyled content
+  if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
+    ie6 = true;
+  } else {
+    document.documentElement.className = document.documentElement.className + ' dk_fouc';
+  }
+  
+  var
+    // Public methods exposed to $.fn.dropkick()
+    methods = {},
+
+    // Cache every <select> element that gets dropkicked
+    lists   = [],
+
+    // Convenience keys for keyboard navigation
+    keyMap = {
+      'left'  : 37,
+      'up'    : 38,
+      'right' : 39,
+      'down'  : 40,
+      'enter' : 13
+    },
+
+    // HTML template for the dropdowns
+    dropdownTemplate = [
+      '<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}">',
+        '<a class="dk_toggle">',
+          '<span class="dk_label">{{ label }}</span>',
+        '</a>',
+        '<div class="dk_options">',
+          '<ul class="dk_options_inner">',
+          '</ul>',
+        '</div>',
+      '</div>'
+    ].join(''),
+
+    // HTML template for dropdown options
+    optionTemplate = '<li class="{{ current }}"><a data-dk-dropdown-value="{{ value }}">{{ text }}</a></li>',
+
+    // Some nice default values
+    defaults = {
+      startSpeed : 1000,  // I recommend a high value here, I feel it makes the changes less noticeable to the user
+      theme  : false,
+      change : false
+    },
+
+    // Make sure we only bind keydown on the document once
+    keysBound = false
+  ;
+
+  // Called by using $('foo').dropkick();
+  methods.init = function (settings) {
+    settings = $.extend({}, defaults, settings);
+
+    return this.each(function () {
+      var
+        // The current <select> element
+        $select = $(this),
+
+        // Store a reference to the originally selected <option> element
+        $original = $select.find(':selected').first(),
+
+        // Save all of the <option> elements
+        $options = $select.find('option'),
+
+        // We store lots of great stuff using jQuery data
+        data = $select.data('dropkick') || {},
+
+        // This gets applied to the 'dk_container' element
+        id = $select.attr('id') || $select.attr('name'),
+
+        // This gets updated to be equal to the longest <option> element
+        width  = settings.width || $select.outerWidth(),
+
+        // Check if we have a tabindex set or not
+        tabindex  = $select.attr('tabindex') ? $select.attr('tabindex') : '',
+
+        // The completed dk_container element
+        $dk = false,
+
+        theme
+      ;
+
+      // Dont do anything if we've already setup dropkick on this element
+      if (data.id) {
+        return $select;
+      } else {
+        data.settings  = settings;
+        data.tabindex  = tabindex;
+        data.id        = id;
+        data.$original = $original;
+        data.$select   = $select;
+        data.value     = _notBlank($select.val()) || _notBlank($original.attr('value'));
+        data.label     = $original.text();
+        data.options   = $options;
+      }
+
+      // Build the dropdown HTML
+      $dk = _build(dropdownTemplate, data);
+
+      // Make the dropdown fixed width if desired
+      $dk.find('.dk_toggle').css({
+        'width' : width + 'px'
+      });
+
+      // Hide the <select> list and place our new one in front of it
+      $select.before($dk);
+
+      // Update the reference to $dk
+      $dk = $('#dk_container_' + id).fadeIn(settings.startSpeed);
+
+      // Save the current theme
+      theme = settings.theme ? settings.theme : 'default';
+      $dk.addClass('dk_theme_' + theme);
+      data.theme = theme;
+
+      // Save the updated $dk reference into our data object
+      data.$dk = $dk;
+
+      // Save the dropkick data onto the <select> element
+      $select.data('dropkick', data);
+
+      // Do the same for the dropdown, but add a few helpers
+      $dk.data('dropkick', data);
+
+      lists[lists.length] = $select;
+
+      // Focus events
+      $dk.bind('focus.dropkick', function (e) {
+        $dk.addClass('dk_focus');
+      }).bind('blur.dropkick', function (e) {
+        $dk.removeClass('dk_open dk_focus');
+      });
+
+      setTimeout(function () {
+        $select.hide();
+      }, 0);
+    });
+  };
+
+  // Allows dynamic theme changes
+  methods.theme = function (newTheme) {
+    var
+      $select   = $(this),
+      list      = $select.data('dropkick'),
+      $dk       = list.$dk,
+      oldtheme  = 'dk_theme_' + list.theme
+    ;
+
+    $dk.removeClass(oldtheme).addClass('dk_theme_' + newTheme);
+
+    list.theme = newTheme;
+  };
+
+  // Reset all <selects and dropdowns in our lists array
+  methods.reset = function () {
+    for (var i = 0, l = lists.length; i < l; i++) {
+      var
+        listData  = lists[i].data('dropkick'),
+        $dk       = listData.$dk,
+        $current  = $dk.find('li').first()
+      ;
+
+      $dk.find('.dk_label').text(listData.label);
+      $dk.find('.dk_options_inner').animate({ scrollTop: 0 }, 0);
+
+      _setCurrent($current, $dk);
+      _updateFields($current, $dk, true);
+    }
+  };
+
+  // Expose the plugin
+  $.fn.dropkick = function (method) {
+    if (!ie6) {
+      if (methods[method]) {
+        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+      } else if (typeof method === 'object' || ! method) {
+        return methods.init.apply(this, arguments);
+      }
+    }
+  };
+
+  // private
+  function _handleKeyBoardNav(e, $dk) {
+    var
+      code     = e.keyCode,
+      data     = $dk.data('dropkick'),
+      options  = $dk.find('.dk_options'),
+      open     = $dk.hasClass('dk_open'),
+      current  = $dk.find('.dk_option_current'),
+      first    = options.find('li').first(),
+      last     = options.find('li').last(),
+      next,
+      prev
+    ;
+
+    switch (code) {
+      case keyMap.enter:
+        if (open) {
+          _updateFields(current.find('a'), $dk);
+          _closeDropdown($dk);
+        } else {
+          _openDropdown($dk);
+        }
+        e.preventDefault();
+      break;
+
+      case keyMap.up:
+        prev = current.prev('li');
+        if (open) {
+          if (prev.length) {
+            _setCurrent(prev, $dk);
+          } else {
+            _setCurrent(last, $dk);
+          }
+        } else {
+          _openDropdown($dk);
+        }
+        e.preventDefault();
+      break;
+
+      case keyMap.down:
+        if (open) {
+          next = current.next('li').first();
+          if (next.length) {
+            _setCurrent(next, $dk);
+          } else {
+            _setCurrent(first, $dk);
+          }
+        } else {
+          _openDropdown($dk);
+        }
+        e.preventDefault();
+      break;
+
+      default:
+      break;
+    }
+  }
+
+  // Update the <select> value, and the dropdown label
+  function _updateFields(option, $dk, reset) {
+    var value, label, data;
+
+    value = option.attr('data-dk-dropdown-value');
+    label = option.text();
+    data  = $dk.data('dropkick');
+
+    $select = data.$select;
+    $select.val(value);
+
+    $dk.find('.dk_label').text(label);
+
+    reset = reset || false;
+
+    if (data.settings.change && !reset) {
+      data.settings.change.call($select, value, label);
+    }
+  }
+
+  // Set the currently selected option
+  function _setCurrent($current, $dk) {
+    $dk.find('.dk_option_current').removeClass('dk_option_current');
+    $current.addClass('dk_option_current');
+
+    _setScrollPos($dk, $current);
+  }
+
+  function _setScrollPos($dk, anchor) {
+    var height = anchor.prevAll('li').outerHeight() * anchor.prevAll('li').length;
+    $dk.find('.dk_options_inner').animate({ scrollTop: height + 'px' }, 0);
+  }
+
+  // Close a dropdown
+  function _closeDropdown($dk) {
+    $dk.removeClass('dk_open');
+  }
+
+  // Open a dropdown
+  function _openDropdown($dk) {
+    var data = $dk.data('dropkick');
+    $dk.find('.dk_options').css({ top : $dk.find('.dk_toggle').outerHeight() - 1 });
+    $dk.toggleClass('dk_open');
+
+  }
+
+  /**
+   * Turn the dropdownTemplate into a jQuery object and fill in the variables.
+   */
+  function _build (tpl, view) {
+    var
+      // Template for the dropdown
+      template  = tpl,
+      // Holder of the dropdowns options
+      options   = [],
+      $dk
+    ;
+
+    template = template.replace('{{ id }}', view.id);
+    template = template.replace('{{ label }}', view.label);
+    template = template.replace('{{ tabindex }}', view.tabindex);
+
+    if (view.options && view.options.length) {
+      for (var i = 0, l = view.options.length; i < l; i++) {
+        var
+          $option   = $(view.options[i]),
+          current   = 'dk_option_current',
+          oTemplate = optionTemplate
+        ;
+
+        oTemplate = oTemplate.replace('{{ value }}', $option.val());
+        oTemplate = oTemplate.replace('{{ current }}', (_notBlank($option.val()) === view.value) ? current : '');
+        oTemplate = oTemplate.replace('{{ text }}', $option.text());
+
+        options[options.length] = oTemplate;
+      }
+    }
+
+    $dk = $(template);
+    $dk.find('.dk_options_inner').html(options.join(''));
+
+    return $dk;
+  }
+
+  function _notBlank(text) {
+    return ($.trim(text).length > 0) ? text : false;
+  }
+
+  $(function () {
+
+    // Handle click events on the dropdown toggler
+    $('.dk_toggle').live('click', function (e) {
+      var $dk  = $(this).parents('.dk_container').first();
+
+      _openDropdown($dk);
+
+      if ("ontouchstart" in window) {
+        $dk.addClass('dk_touch');
+        $dk.find('.dk_options_inner').addClass('scrollable vertical');
+      }
+
+      e.preventDefault();
+      return false;
+    });
+
+    // Handle click events on individual dropdown options
+    $('.dk_options a').live(($.browser.msie ? 'mousedown' : 'click'), function (e) {
+      var
+        $option = $(this),
+        $dk     = $option.parents('.dk_container').first(),
+        data    = $dk.data('dropkick')
+      ;
+    
+      _closeDropdown($dk);
+      _updateFields($option, $dk);
+      _setCurrent($option.parent(), $dk);
+    
+      e.preventDefault();
+      return false;
+    });
+
+    // Setup keyboard nav
+    $(document).bind('keydown.dk_nav', function (e) {
+      var
+        // Look for an open dropdown...
+        $open    = $('.dk_container.dk_open'),
+
+        // Look for a focused dropdown
+        $focused = $('.dk_container.dk_focus'),
+
+        // Will be either $open, $focused, or null
+        $dk = null
+      ;
+
+      // If we have an open dropdown, key events should get sent to that one
+      if ($open.length) {
+        $dk = $open;
+      } else if ($focused.length && !$open.length) {
+        // But if we have no open dropdowns, use the focused dropdown instead
+        $dk = $focused;
+      }
+
+      if ($dk) {
+        _handleKeyBoardNav(e, $dk);
+      }
+    });
+  });
+})(jQuery, window, document);
\ No newline at end of file
diff --git a/snf-astakos-app/astakos/im/static/im/js/os.js b/snf-astakos-app/astakos/im/static/im/js/os.js
new file mode 100644
index 0000000..8dfaba7
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/js/os.js
@@ -0,0 +1,117 @@
+var BrowserDetect = {
+	init: function () {
+		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
+		this.version = this.searchVersion(navigator.userAgent)
+			|| this.searchVersion(navigator.appVersion)
+			|| "an unknown version";
+		this.OS = this.searchString(this.dataOS) || "an unknown OS";
+	},
+	searchString: function (data) {
+		for (var i=0;i<data.length;i++)	{
+			var dataString = data[i].string;
+			var dataProp = data[i].prop;
+			this.versionSearchString = data[i].versionSearch || data[i].identity;
+			if (dataString) {
+				if (dataString.indexOf(data[i].subString) != -1)
+					return data[i].identity;
+			}
+			else if (dataProp)
+				return data[i].identity;
+		}
+	},
+	searchVersion: function (dataString) {
+		var index = dataString.indexOf(this.versionSearchString);
+		if (index == -1) return;
+		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
+	},
+	dataBrowser: [
+		{
+			string: navigator.userAgent,
+			subString: "Chrome",
+			identity: "Chrome"
+		},
+		{ 	string: navigator.userAgent,
+			subString: "OmniWeb",
+			versionSearch: "OmniWeb/",
+			identity: "OmniWeb"
+		},
+		{
+			string: navigator.vendor,
+			subString: "Apple",
+			identity: "Safari",
+			versionSearch: "Version"
+		},
+		{
+			prop: window.opera,
+			identity: "Opera",
+			versionSearch: "Version"
+		},
+		{
+			string: navigator.vendor,
+			subString: "iCab",
+			identity: "iCab"
+		},
+		{
+			string: navigator.vendor,
+			subString: "KDE",
+			identity: "Konqueror"
+		},
+		{
+			string: navigator.userAgent,
+			subString: "Firefox",
+			identity: "Firefox"
+		},
+		{
+			string: navigator.vendor,
+			subString: "Camino",
+			identity: "Camino"
+		},
+		{		// for newer Netscapes (6+)
+			string: navigator.userAgent,
+			subString: "Netscape",
+			identity: "Netscape"
+		},
+		{
+			string: navigator.userAgent,
+			subString: "MSIE",
+			identity: "Explorer",
+			versionSearch: "MSIE"
+		},
+		{
+			string: navigator.userAgent,
+			subString: "Gecko",
+			identity: "Mozilla",
+			versionSearch: "rv"
+		},
+		{ 		// for older Netscapes (4-)
+			string: navigator.userAgent,
+			subString: "Mozilla",
+			identity: "Netscape",
+			versionSearch: "Mozilla"
+		}
+	],
+	dataOS : [
+		{
+			string: navigator.platform,
+			subString: "Win",
+			identity: "Windows"
+		},
+		{
+			string: navigator.platform,
+			subString: "Mac",
+			identity: "Mac"
+		},
+		{
+			   string: navigator.userAgent,
+			   subString: "iPhone",
+			   identity: "iPhone/iPod"
+	    },
+		{
+			string: navigator.platform,
+			subString: "Linux",
+			identity: "Linux"
+		}
+	]
+
+};
+BrowserDetect.init();
diff --git a/snf-astakos-app/astakos/im/static/im/js/resources_list.js b/snf-astakos-app/astakos/im/static/im/js/resources_list.js
new file mode 100644
index 0000000..6b293b7
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/js/resources_list.js
@@ -0,0 +1,120 @@
+// Array Remove - By John Resig (MIT Licensed)
+Array.prototype.remove = function(from, to) {
+  var rest = this.slice((to || from) + 1 || this.length);
+  this.length = from < 0 ? this.length + from : from;
+  return this.push.apply(this, rest);
+};
+
+function ResourcesModule(el, conf) {
+    
+    var defaults = {'page_limit': 5};
+    this.conf = $.extend(defaults, conf);
+
+    this.el = el;
+    
+    this.selected_category = window.location.hash.replace("#","");
+    if (!this.selected_category) { this.selected_category = undefined };
+    
+    this.categories = this.el.find(".categories ul li");
+    this.orig_categories = this.categories.clone();
+        
+    //this.update_page_objects();
+    
+    this.grid_height = 251;
+    this.grid_width = 251;
+    this.grid_gap = 22;
+
+    var self = this;
+    $(window).bind('hashchange', function() {
+        self.selected_category = window.location.hash.substring(1);
+        self.update_page_objects();
+        self.update_selected_category();
+    })
+
+    self.update_page_objects();
+    self.update_selected_category();
+}
+
+ResourcesModule.prototype.switch = function(hide, show) {
+    var hide = $(hide), show = $(show);
+    var toparent = hide.parent();
+    var newshow = show.clone();
+    toparent.append(newshow);
+    hide.animate({top:"-249px"})
+    newshow.animate({
+                    top:"-249px"
+                }, 
+                {
+                    complete:function(){
+                        hide.remove();
+                        newshow.css({top:0});
+                }
+    })
+}
+
+
+ResourcesModule.prototype.resources = function() {
+    this._resources  = this.el.find(".resource-wrapper");
+    return this._resources;
+}
+
+ResourcesModule.prototype.hide = function(q) {
+    q.fadeOut(300);
+}
+
+ResourcesModule.prototype.animate_els = function(els) {
+    $(el).css({ position:'absolute' });
+    var left = i % 3 == 0 ? 0 : (i % 3) * (self.grid_width) + ((i % 3)-1) * self.grid_gap;
+
+    var row = Math.floor(i/3);
+    var top = row * (self.grid_gap + self.grid_height);
+
+    $(el).animate({left: left}, { complete: function(){
+        $(el).animate({top: top}, {complete: function(){
+        
+            self.el.height((self.grid_height + self.grid_gap) * (Math.floor(to_show.length/3) + 1));
+        
+        }});
+    }});
+     
+    $(el).removeClass("hidden");
+    $(el).show('slow');
+}
+
+ResourcesModule.prototype.update_selected_category = function() {
+    if (!this.selected_category) {
+        this.categories.removeClass("inactive").removeClass("active");
+        this.categories.show();
+        this.el.find(".categories a.clear").hide();
+        return;
+    }
+
+    var to_hide = this.categories.filter("[data-id="+this.selected_category+"]");
+    var to_show = this.categories.filter("[data-id!="+this.selected_category+"]");
+
+    to_show.removeClass("active").addClass("inactive");
+    to_hide.removeClass("inactive").addClass("active");
+    this.el.find(".categories a.clear").show();
+}
+
+ResourcesModule.prototype.update_page_objects = function() {
+    var to_show = this.resources().filter("[data-category="+this.selected_category+"]");
+    var to_hide = this.resources().filter("[data-category!="+this.selected_category+"]");
+        
+    if (!this.selected_category) { to_show = this.resources(); }
+    _.each(to_hide, function(el){
+        $(el).hide('slow');
+    });
+
+    _.each(to_show, function(el, i){
+         
+        $(el).fadeIn(40);
+    });
+}
+
+$(document).ready(function(){
+    var rm = new ResourcesModule($("#resources-list"), {}, []);
+    window.rm = rm;
+})
+
+
diff --git a/snf-astakos-app/astakos/im/static/im/js/underscore.js b/snf-astakos-app/astakos/im/static/im/js/underscore.js
new file mode 100644
index 0000000..f6f7e2f
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/js/underscore.js
@@ -0,0 +1,1059 @@
+//     Underscore.js 1.3.3
+//     (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc.
+//     Underscore is freely distributable under the MIT license.
+//     Portions of Underscore are inspired or borrowed from Prototype,
+//     Oliver Steele's Functional, and John Resig's Micro-Templating.
+//     For all details and documentation:
+//     http://documentcloud.github.com/underscore
+
+(function() {
+
+  // Baseline setup
+  // --------------
+
+  // Establish the root object, `window` in the browser, or `global` on the server.
+  var root = this;
+
+  // Save the previous value of the `_` variable.
+  var previousUnderscore = root._;
+
+  // Establish the object that gets returned to break out of a loop iteration.
+  var breaker = {};
+
+  // Save bytes in the minified (but not gzipped) version:
+  var ArrayProto = Array.prototype, ObjProto = Object.prototype, FuncProto = Function.prototype;
+
+  // Create quick reference variables for speed access to core prototypes.
+  var slice            = ArrayProto.slice,
+      unshift          = ArrayProto.unshift,
+      toString         = ObjProto.toString,
+      hasOwnProperty   = ObjProto.hasOwnProperty;
+
+  // All **ECMAScript 5** native function implementations that we hope to use
+  // are declared here.
+  var
+    nativeForEach      = ArrayProto.forEach,
+    nativeMap          = ArrayProto.map,
+    nativeReduce       = ArrayProto.reduce,
+    nativeReduceRight  = ArrayProto.reduceRight,
+    nativeFilter       = ArrayProto.filter,
+    nativeEvery        = ArrayProto.every,
+    nativeSome         = ArrayProto.some,
+    nativeIndexOf      = ArrayProto.indexOf,
+    nativeLastIndexOf  = ArrayProto.lastIndexOf,
+    nativeIsArray      = Array.isArray,
+    nativeKeys         = Object.keys,
+    nativeBind         = FuncProto.bind;
+
+  // Create a safe reference to the Underscore object for use below.
+  var _ = function(obj) { return new wrapper(obj); };
+
+  // Export the Underscore object for **Node.js**, with
+  // backwards-compatibility for the old `require()` API. If we're in
+  // the browser, add `_` as a global object via a string identifier,
+  // for Closure Compiler "advanced" mode.
+  if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = _;
+    }
+    exports._ = _;
+  } else {
+    root['_'] = _;
+  }
+
+  // Current version.
+  _.VERSION = '1.3.3';
+
+  // Collection Functions
+  // --------------------
+
+  // The cornerstone, an `each` implementation, aka `forEach`.
+  // Handles objects with the built-in `forEach`, arrays, and raw objects.
+  // Delegates to **ECMAScript 5**'s native `forEach` if available.
+  var each = _.each = _.forEach = function(obj, iterator, context) {
+    if (obj == null) return;
+    if (nativeForEach && obj.forEach === nativeForEach) {
+      obj.forEach(iterator, context);
+    } else if (obj.length === +obj.length) {
+      for (var i = 0, l = obj.length; i < l; i++) {
+        if (i in obj && iterator.call(context, obj[i], i, obj) === breaker) return;
+      }
+    } else {
+      for (var key in obj) {
+        if (_.has(obj, key)) {
+          if (iterator.call(context, obj[key], key, obj) === breaker) return;
+        }
+      }
+    }
+  };
+
+  // Return the results of applying the iterator to each element.
+  // Delegates to **ECMAScript 5**'s native `map` if available.
+  _.map = _.collect = function(obj, iterator, context) {
+    var results = [];
+    if (obj == null) return results;
+    if (nativeMap && obj.map === nativeMap) return obj.map(iterator, context);
+    each(obj, function(value, index, list) {
+      results[results.length] = iterator.call(context, value, index, list);
+    });
+    if (obj.length === +obj.length) results.length = obj.length;
+    return results;
+  };
+
+  // **Reduce** builds up a single result from a list of values, aka `inject`,
+  // or `foldl`. Delegates to **ECMAScript 5**'s native `reduce` if available.
+  _.reduce = _.foldl = _.inject = function(obj, iterator, memo, context) {
+    var initial = arguments.length > 2;
+    if (obj == null) obj = [];
+    if (nativeReduce && obj.reduce === nativeReduce) {
+      if (context) iterator = _.bind(iterator, context);
+      return initial ? obj.reduce(iterator, memo) : obj.reduce(iterator);
+    }
+    each(obj, function(value, index, list) {
+      if (!initial) {
+        memo = value;
+        initial = true;
+      } else {
+        memo = iterator.call(context, memo, value, index, list);
+      }
+    });
+    if (!initial) throw new TypeError('Reduce of empty array with no initial value');
+    return memo;
+  };
+
+  // The right-associative version of reduce, also known as `foldr`.
+  // Delegates to **ECMAScript 5**'s native `reduceRight` if available.
+  _.reduceRight = _.foldr = function(obj, iterator, memo, context) {
+    var initial = arguments.length > 2;
+    if (obj == null) obj = [];
+    if (nativeReduceRight && obj.reduceRight === nativeReduceRight) {
+      if (context) iterator = _.bind(iterator, context);
+      return initial ? obj.reduceRight(iterator, memo) : obj.reduceRight(iterator);
+    }
+    var reversed = _.toArray(obj).reverse();
+    if (context && !initial) iterator = _.bind(iterator, context);
+    return initial ? _.reduce(reversed, iterator, memo, context) : _.reduce(reversed, iterator);
+  };
+
+  // Return the first value which passes a truth test. Aliased as `detect`.
+  _.find = _.detect = function(obj, iterator, context) {
+    var result;
+    any(obj, function(value, index, list) {
+      if (iterator.call(context, value, index, list)) {
+        result = value;
+        return true;
+      }
+    });
+    return result;
+  };
+
+  // Return all the elements that pass a truth test.
+  // Delegates to **ECMAScript 5**'s native `filter` if available.
+  // Aliased as `select`.
+  _.filter = _.select = function(obj, iterator, context) {
+    var results = [];
+    if (obj == null) return results;
+    if (nativeFilter && obj.filter === nativeFilter) return obj.filter(iterator, context);
+    each(obj, function(value, index, list) {
+      if (iterator.call(context, value, index, list)) results[results.length] = value;
+    });
+    return results;
+  };
+
+  // Return all the elements for which a truth test fails.
+  _.reject = function(obj, iterator, context) {
+    var results = [];
+    if (obj == null) return results;
+    each(obj, function(value, index, list) {
+      if (!iterator.call(context, value, index, list)) results[results.length] = value;
+    });
+    return results;
+  };
+
+  // Determine whether all of the elements match a truth test.
+  // Delegates to **ECMAScript 5**'s native `every` if available.
+  // Aliased as `all`.
+  _.every = _.all = function(obj, iterator, context) {
+    var result = true;
+    if (obj == null) return result;
+    if (nativeEvery && obj.every === nativeEvery) return obj.every(iterator, context);
+    each(obj, function(value, index, list) {
+      if (!(result = result && iterator.call(context, value, index, list))) return breaker;
+    });
+    return !!result;
+  };
+
+  // Determine if at least one element in the object matches a truth test.
+  // Delegates to **ECMAScript 5**'s native `some` if available.
+  // Aliased as `any`.
+  var any = _.some = _.any = function(obj, iterator, context) {
+    iterator || (iterator = _.identity);
+    var result = false;
+    if (obj == null) return result;
+    if (nativeSome && obj.some === nativeSome) return obj.some(iterator, context);
+    each(obj, function(value, index, list) {
+      if (result || (result = iterator.call(context, value, index, list))) return breaker;
+    });
+    return !!result;
+  };
+
+  // Determine if a given value is included in the array or object using `===`.
+  // Aliased as `contains`.
+  _.include = _.contains = function(obj, target) {
+    var found = false;
+    if (obj == null) return found;
+    if (nativeIndexOf && obj.indexOf === nativeIndexOf) return obj.indexOf(target) != -1;
+    found = any(obj, function(value) {
+      return value === target;
+    });
+    return found;
+  };
+
+  // Invoke a method (with arguments) on every item in a collection.
+  _.invoke = function(obj, method) {
+    var args = slice.call(arguments, 2);
+    return _.map(obj, function(value) {
+      return (_.isFunction(method) ? method || value : value[method]).apply(value, args);
+    });
+  };
+
+  // Convenience version of a common use case of `map`: fetching a property.
+  _.pluck = function(obj, key) {
+    return _.map(obj, function(value){ return value[key]; });
+  };
+
+  // Return the maximum element or (element-based computation).
+  _.max = function(obj, iterator, context) {
+    if (!iterator && _.isArray(obj) && obj[0] === +obj[0]) return Math.max.apply(Math, obj);
+    if (!iterator && _.isEmpty(obj)) return -Infinity;
+    var result = {computed : -Infinity};
+    each(obj, function(value, index, list) {
+      var computed = iterator ? iterator.call(context, value, index, list) : value;
+      computed >= result.computed && (result = {value : value, computed : computed});
+    });
+    return result.value;
+  };
+
+  // Return the minimum element (or element-based computation).
+  _.min = function(obj, iterator, context) {
+    if (!iterator && _.isArray(obj) && obj[0] === +obj[0]) return Math.min.apply(Math, obj);
+    if (!iterator && _.isEmpty(obj)) return Infinity;
+    var result = {computed : Infinity};
+    each(obj, function(value, index, list) {
+      var computed = iterator ? iterator.call(context, value, index, list) : value;
+      computed < result.computed && (result = {value : value, computed : computed});
+    });
+    return result.value;
+  };
+
+  // Shuffle an array.
+  _.shuffle = function(obj) {
+    var shuffled = [], rand;
+    each(obj, function(value, index, list) {
+      rand = Math.floor(Math.random() * (index + 1));
+      shuffled[index] = shuffled[rand];
+      shuffled[rand] = value;
+    });
+    return shuffled;
+  };
+
+  // Sort the object's values by a criterion produced by an iterator.
+  _.sortBy = function(obj, val, context) {
+    var iterator = _.isFunction(val) ? val : function(obj) { return obj[val]; };
+    return _.pluck(_.map(obj, function(value, index, list) {
+      return {
+        value : value,
+        criteria : iterator.call(context, value, index, list)
+      };
+    }).sort(function(left, right) {
+      var a = left.criteria, b = right.criteria;
+      if (a === void 0) return 1;
+      if (b === void 0) return -1;
+      return a < b ? -1 : a > b ? 1 : 0;
+    }), 'value');
+  };
+
+  // Groups the object's values by a criterion. Pass either a string attribute
+  // to group by, or a function that returns the criterion.
+  _.groupBy = function(obj, val) {
+    var result = {};
+    var iterator = _.isFunction(val) ? val : function(obj) { return obj[val]; };
+    each(obj, function(value, index) {
+      var key = iterator(value, index);
+      (result[key] || (result[key] = [])).push(value);
+    });
+    return result;
+  };
+
+  // Use a comparator function to figure out at what index an object should
+  // be inserted so as to maintain order. Uses binary search.
+  _.sortedIndex = function(array, obj, iterator) {
+    iterator || (iterator = _.identity);
+    var low = 0, high = array.length;
+    while (low < high) {
+      var mid = (low + high) >> 1;
+      iterator(array[mid]) < iterator(obj) ? low = mid + 1 : high = mid;
+    }
+    return low;
+  };
+
+  // Safely convert anything iterable into a real, live array.
+  _.toArray = function(obj) {
+    if (!obj)                                     return [];
+    if (_.isArray(obj))                           return slice.call(obj);
+    if (_.isArguments(obj))                       return slice.call(obj);
+    if (obj.toArray && _.isFunction(obj.toArray)) return obj.toArray();
+    return _.values(obj);
+  };
+
+  // Return the number of elements in an object.
+  _.size = function(obj) {
+    return _.isArray(obj) ? obj.length : _.keys(obj).length;
+  };
+
+  // Array Functions
+  // ---------------
+
+  // Get the first element of an array. Passing **n** will return the first N
+  // values in the array. Aliased as `head` and `take`. The **guard** check
+  // allows it to work with `_.map`.
+  _.first = _.head = _.take = function(array, n, guard) {
+    return (n != null) && !guard ? slice.call(array, 0, n) : array[0];
+  };
+
+  // Returns everything but the last entry of the array. Especcialy useful on
+  // the arguments object. Passing **n** will return all the values in
+  // the array, excluding the last N. The **guard** check allows it to work with
+  // `_.map`.
+  _.initial = function(array, n, guard) {
+    return slice.call(array, 0, array.length - ((n == null) || guard ? 1 : n));
+  };
+
+  // Get the last element of an array. Passing **n** will return the last N
+  // values in the array. The **guard** check allows it to work with `_.map`.
+  _.last = function(array, n, guard) {
+    if ((n != null) && !guard) {
+      return slice.call(array, Math.max(array.length - n, 0));
+    } else {
+      return array[array.length - 1];
+    }
+  };
+
+  // Returns everything but the first entry of the array. Aliased as `tail`.
+  // Especially useful on the arguments object. Passing an **index** will return
+  // the rest of the values in the array from that index onward. The **guard**
+  // check allows it to work with `_.map`.
+  _.rest = _.tail = function(array, index, guard) {
+    return slice.call(array, (index == null) || guard ? 1 : index);
+  };
+
+  // Trim out all falsy values from an array.
+  _.compact = function(array) {
+    return _.filter(array, function(value){ return !!value; });
+  };
+
+  // Return a completely flattened version of an array.
+  _.flatten = function(array, shallow) {
+    return _.reduce(array, function(memo, value) {
+      if (_.isArray(value)) return memo.concat(shallow ? value : _.flatten(value));
+      memo[memo.length] = value;
+      return memo;
+    }, []);
+  };
+
+  // Return a version of the array that does not contain the specified value(s).
+  _.without = function(array) {
+    return _.difference(array, slice.call(arguments, 1));
+  };
+
+  // Produce a duplicate-free version of the array. If the array has already
+  // been sorted, you have the option of using a faster algorithm.
+  // Aliased as `unique`.
+  _.uniq = _.unique = function(array, isSorted, iterator) {
+    var initial = iterator ? _.map(array, iterator) : array;
+    var results = [];
+    // The `isSorted` flag is irrelevant if the array only contains two elements.
+    if (array.length < 3) isSorted = true;
+    _.reduce(initial, function (memo, value, index) {
+      if (isSorted ? _.last(memo) !== value || !memo.length : !_.include(memo, value)) {
+        memo.push(value);
+        results.push(array[index]);
+      }
+      return memo;
+    }, []);
+    return results;
+  };
+
+  // Produce an array that contains the union: each distinct element from all of
+  // the passed-in arrays.
+  _.union = function() {
+    return _.uniq(_.flatten(arguments, true));
+  };
+
+  // Produce an array that contains every item shared between all the
+  // passed-in arrays. (Aliased as "intersect" for back-compat.)
+  _.intersection = _.intersect = function(array) {
+    var rest = slice.call(arguments, 1);
+    return _.filter(_.uniq(array), function(item) {
+      return _.every(rest, function(other) {
+        return _.indexOf(other, item) >= 0;
+      });
+    });
+  };
+
+  // Take the difference between one array and a number of other arrays.
+  // Only the elements present in just the first array will remain.
+  _.difference = function(array) {
+    var rest = _.flatten(slice.call(arguments, 1), true);
+    return _.filter(array, function(value){ return !_.include(rest, value); });
+  };
+
+  // Zip together multiple lists into a single array -- elements that share
+  // an index go together.
+  _.zip = function() {
+    var args = slice.call(arguments);
+    var length = _.max(_.pluck(args, 'length'));
+    var results = new Array(length);
+    for (var i = 0; i < length; i++) results[i] = _.pluck(args, "" + i);
+    return results;
+  };
+
+  // If the browser doesn't supply us with indexOf (I'm looking at you, **MSIE**),
+  // we need this function. Return the position of the first occurrence of an
+  // item in an array, or -1 if the item is not included in the array.
+  // Delegates to **ECMAScript 5**'s native `indexOf` if available.
+  // If the array is large and already in sort order, pass `true`
+  // for **isSorted** to use binary search.
+  _.indexOf = function(array, item, isSorted) {
+    if (array == null) return -1;
+    var i, l;
+    if (isSorted) {
+      i = _.sortedIndex(array, item);
+      return array[i] === item ? i : -1;
+    }
+    if (nativeIndexOf && array.indexOf === nativeIndexOf) return array.indexOf(item);
+    for (i = 0, l = array.length; i < l; i++) if (i in array && array[i] === item) return i;
+    return -1;
+  };
+
+  // Delegates to **ECMAScript 5**'s native `lastIndexOf` if available.
+  _.lastIndexOf = function(array, item) {
+    if (array == null) return -1;
+    if (nativeLastIndexOf && array.lastIndexOf === nativeLastIndexOf) return array.lastIndexOf(item);
+    var i = array.length;
+    while (i--) if (i in array && array[i] === item) return i;
+    return -1;
+  };
+
+  // Generate an integer Array containing an arithmetic progression. A port of
+  // the native Python `range()` function. See
+  // [the Python documentation](http://docs.python.org/library/functions.html#range).
+  _.range = function(start, stop, step) {
+    if (arguments.length <= 1) {
+      stop = start || 0;
+      start = 0;
+    }
+    step = arguments[2] || 1;
+
+    var len = Math.max(Math.ceil((stop - start) / step), 0);
+    var idx = 0;
+    var range = new Array(len);
+
+    while(idx < len) {
+      range[idx++] = start;
+      start += step;
+    }
+
+    return range;
+  };
+
+  // Function (ahem) Functions
+  // ------------------
+
+  // Reusable constructor function for prototype setting.
+  var ctor = function(){};
+
+  // Create a function bound to a given object (assigning `this`, and arguments,
+  // optionally). Binding with arguments is also known as `curry`.
+  // Delegates to **ECMAScript 5**'s native `Function.bind` if available.
+  // We check for `func.bind` first, to fail fast when `func` is undefined.
+  _.bind = function bind(func, context) {
+    var bound, args;
+    if (func.bind === nativeBind && nativeBind) return nativeBind.apply(func, slice.call(arguments, 1));
+    if (!_.isFunction(func)) throw new TypeError;
+    args = slice.call(arguments, 2);
+    return bound = function() {
+      if (!(this instanceof bound)) return func.apply(context, args.concat(slice.call(arguments)));
+      ctor.prototype = func.prototype;
+      var self = new ctor;
+      var result = func.apply(self, args.concat(slice.call(arguments)));
+      if (Object(result) === result) return result;
+      return self;
+    };
+  };
+
+  // Bind all of an object's methods to that object. Useful for ensuring that
+  // all callbacks defined on an object belong to it.
+  _.bindAll = function(obj) {
+    var funcs = slice.call(arguments, 1);
+    if (funcs.length == 0) funcs = _.functions(obj);
+    each(funcs, function(f) { obj[f] = _.bind(obj[f], obj); });
+    return obj;
+  };
+
+  // Memoize an expensive function by storing its results.
+  _.memoize = function(func, hasher) {
+    var memo = {};
+    hasher || (hasher = _.identity);
+    return function() {
+      var key = hasher.apply(this, arguments);
+      return _.has(memo, key) ? memo[key] : (memo[key] = func.apply(this, arguments));
+    };
+  };
+
+  // Delays a function for the given number of milliseconds, and then calls
+  // it with the arguments supplied.
+  _.delay = function(func, wait) {
+    var args = slice.call(arguments, 2);
+    return setTimeout(function(){ return func.apply(null, args); }, wait);
+  };
+
+  // Defers a function, scheduling it to run after the current call stack has
+  // cleared.
+  _.defer = function(func) {
+    return _.delay.apply(_, [func, 1].concat(slice.call(arguments, 1)));
+  };
+
+  // Returns a function, that, when invoked, will only be triggered at most once
+  // during a given window of time.
+  _.throttle = function(func, wait) {
+    var context, args, timeout, throttling, more, result;
+    var whenDone = _.debounce(function(){ more = throttling = false; }, wait);
+    return function() {
+      context = this; args = arguments;
+      var later = function() {
+        timeout = null;
+        if (more) func.apply(context, args);
+        whenDone();
+      };
+      if (!timeout) timeout = setTimeout(later, wait);
+      if (throttling) {
+        more = true;
+      } else {
+        result = func.apply(context, args);
+      }
+      whenDone();
+      throttling = true;
+      return result;
+    };
+  };
+
+  // Returns a function, that, as long as it continues to be invoked, will not
+  // be triggered. The function will be called after it stops being called for
+  // N milliseconds. If `immediate` is passed, trigger the function on the
+  // leading edge, instead of the trailing.
+  _.debounce = function(func, wait, immediate) {
+    var timeout;
+    return function() {
+      var context = this, args = arguments;
+      var later = function() {
+        timeout = null;
+        if (!immediate) func.apply(context, args);
+      };
+      if (immediate && !timeout) func.apply(context, args);
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  };
+
+  // Returns a function that will be executed at most one time, no matter how
+  // often you call it. Useful for lazy initialization.
+  _.once = function(func) {
+    var ran = false, memo;
+    return function() {
+      if (ran) return memo;
+      ran = true;
+      return memo = func.apply(this, arguments);
+    };
+  };
+
+  // Returns the first function passed as an argument to the second,
+  // allowing you to adjust arguments, run code before and after, and
+  // conditionally execute the original function.
+  _.wrap = function(func, wrapper) {
+    return function() {
+      var args = [func].concat(slice.call(arguments, 0));
+      return wrapper.apply(this, args);
+    };
+  };
+
+  // Returns a function that is the composition of a list of functions, each
+  // consuming the return value of the function that follows.
+  _.compose = function() {
+    var funcs = arguments;
+    return function() {
+      var args = arguments;
+      for (var i = funcs.length - 1; i >= 0; i--) {
+        args = [funcs[i].apply(this, args)];
+      }
+      return args[0];
+    };
+  };
+
+  // Returns a function that will only be executed after being called N times.
+  _.after = function(times, func) {
+    if (times <= 0) return func();
+    return function() {
+      if (--times < 1) { return func.apply(this, arguments); }
+    };
+  };
+
+  // Object Functions
+  // ----------------
+
+  // Retrieve the names of an object's properties.
+  // Delegates to **ECMAScript 5**'s native `Object.keys`
+  _.keys = nativeKeys || function(obj) {
+    if (obj !== Object(obj)) throw new TypeError('Invalid object');
+    var keys = [];
+    for (var key in obj) if (_.has(obj, key)) keys[keys.length] = key;
+    return keys;
+  };
+
+  // Retrieve the values of an object's properties.
+  _.values = function(obj) {
+    return _.map(obj, _.identity);
+  };
+
+  // Return a sorted list of the function names available on the object.
+  // Aliased as `methods`
+  _.functions = _.methods = function(obj) {
+    var names = [];
+    for (var key in obj) {
+      if (_.isFunction(obj[key])) names.push(key);
+    }
+    return names.sort();
+  };
+
+  // Extend a given object with all the properties in passed-in object(s).
+  _.extend = function(obj) {
+    each(slice.call(arguments, 1), function(source) {
+      for (var prop in source) {
+        obj[prop] = source[prop];
+      }
+    });
+    return obj;
+  };
+
+  // Return a copy of the object only containing the whitelisted properties.
+  _.pick = function(obj) {
+    var result = {};
+    each(_.flatten(slice.call(arguments, 1)), function(key) {
+      if (key in obj) result[key] = obj[key];
+    });
+    return result;
+  };
+
+  // Fill in a given object with default properties.
+  _.defaults = function(obj) {
+    each(slice.call(arguments, 1), function(source) {
+      for (var prop in source) {
+        if (obj[prop] == null) obj[prop] = source[prop];
+      }
+    });
+    return obj;
+  };
+
+  // Create a (shallow-cloned) duplicate of an object.
+  _.clone = function(obj) {
+    if (!_.isObject(obj)) return obj;
+    return _.isArray(obj) ? obj.slice() : _.extend({}, obj);
+  };
+
+  // Invokes interceptor with the obj, and then returns obj.
+  // The primary purpose of this method is to "tap into" a method chain, in
+  // order to perform operations on intermediate results within the chain.
+  _.tap = function(obj, interceptor) {
+    interceptor(obj);
+    return obj;
+  };
+
+  // Internal recursive comparison function.
+  function eq(a, b, stack) {
+    // Identical objects are equal. `0 === -0`, but they aren't identical.
+    // See the Harmony `egal` proposal: http://wiki.ecmascript.org/doku.php?id=harmony:egal.
+    if (a === b) return a !== 0 || 1 / a == 1 / b;
+    // A strict comparison is necessary because `null == undefined`.
+    if (a == null || b == null) return a === b;
+    // Unwrap any wrapped objects.
+    if (a._chain) a = a._wrapped;
+    if (b._chain) b = b._wrapped;
+    // Invoke a custom `isEqual` method if one is provided.
+    if (a.isEqual && _.isFunction(a.isEqual)) return a.isEqual(b);
+    if (b.isEqual && _.isFunction(b.isEqual)) return b.isEqual(a);
+    // Compare `[[Class]]` names.
+    var className = toString.call(a);
+    if (className != toString.call(b)) return false;
+    switch (className) {
+      // Strings, numbers, dates, and booleans are compared by value.
+      case '[object String]':
+        // Primitives and their corresponding object wrappers are equivalent; thus, `"5"` is
+        // equivalent to `new String("5")`.
+        return a == String(b);
+      case '[object Number]':
+        // `NaN`s are equivalent, but non-reflexive. An `egal` comparison is performed for
+        // other numeric values.
+        return a != +a ? b != +b : (a == 0 ? 1 / a == 1 / b : a == +b);
+      case '[object Date]':
+      case '[object Boolean]':
+        // Coerce dates and booleans to numeric primitive values. Dates are compared by their
+        // millisecond representations. Note that invalid dates with millisecond representations
+        // of `NaN` are not equivalent.
+        return +a == +b;
+      // RegExps are compared by their source patterns and flags.
+      case '[object RegExp]':
+        return a.source == b.source &&
+               a.global == b.global &&
+               a.multiline == b.multiline &&
+               a.ignoreCase == b.ignoreCase;
+    }
+    if (typeof a != 'object' || typeof b != 'object') return false;
+    // Assume equality for cyclic structures. The algorithm for detecting cyclic
+    // structures is adapted from ES 5.1 section 15.12.3, abstract operation `JO`.
+    var length = stack.length;
+    while (length--) {
+      // Linear search. Performance is inversely proportional to the number of
+      // unique nested structures.
+      if (stack[length] == a) return true;
+    }
+    // Add the first object to the stack of traversed objects.
+    stack.push(a);
+    var size = 0, result = true;
+    // Recursively compare objects and arrays.
+    if (className == '[object Array]') {
+      // Compare array lengths to determine if a deep comparison is necessary.
+      size = a.length;
+      result = size == b.length;
+      if (result) {
+        // Deep compare the contents, ignoring non-numeric properties.
+        while (size--) {
+          // Ensure commutative equality for sparse arrays.
+          if (!(result = size in a == size in b && eq(a[size], b[size], stack))) break;
+        }
+      }
+    } else {
+      // Objects with different constructors are not equivalent.
+      if ('constructor' in a != 'constructor' in b || a.constructor != b.constructor) return false;
+      // Deep compare objects.
+      for (var key in a) {
+        if (_.has(a, key)) {
+          // Count the expected number of properties.
+          size++;
+          // Deep compare each member.
+          if (!(result = _.has(b, key) && eq(a[key], b[key], stack))) break;
+        }
+      }
+      // Ensure that both objects contain the same number of properties.
+      if (result) {
+        for (key in b) {
+          if (_.has(b, key) && !(size--)) break;
+        }
+        result = !size;
+      }
+    }
+    // Remove the first object from the stack of traversed objects.
+    stack.pop();
+    return result;
+  }
+
+  // Perform a deep comparison to check if two objects are equal.
+  _.isEqual = function(a, b) {
+    return eq(a, b, []);
+  };
+
+  // Is a given array, string, or object empty?
+  // An "empty" object has no enumerable own-properties.
+  _.isEmpty = function(obj) {
+    if (obj == null) return true;
+    if (_.isArray(obj) || _.isString(obj)) return obj.length === 0;
+    for (var key in obj) if (_.has(obj, key)) return false;
+    return true;
+  };
+
+  // Is a given value a DOM element?
+  _.isElement = function(obj) {
+    return !!(obj && obj.nodeType == 1);
+  };
+
+  // Is a given value an array?
+  // Delegates to ECMA5's native Array.isArray
+  _.isArray = nativeIsArray || function(obj) {
+    return toString.call(obj) == '[object Array]';
+  };
+
+  // Is a given variable an object?
+  _.isObject = function(obj) {
+    return obj === Object(obj);
+  };
+
+  // Is a given variable an arguments object?
+  _.isArguments = function(obj) {
+    return toString.call(obj) == '[object Arguments]';
+  };
+  if (!_.isArguments(arguments)) {
+    _.isArguments = function(obj) {
+      return !!(obj && _.has(obj, 'callee'));
+    };
+  }
+
+  // Is a given value a function?
+  _.isFunction = function(obj) {
+    return toString.call(obj) == '[object Function]';
+  };
+
+  // Is a given value a string?
+  _.isString = function(obj) {
+    return toString.call(obj) == '[object String]';
+  };
+
+  // Is a given value a number?
+  _.isNumber = function(obj) {
+    return toString.call(obj) == '[object Number]';
+  };
+
+  // Is a given object a finite number?
+  _.isFinite = function(obj) {
+    return _.isNumber(obj) && isFinite(obj);
+  };
+
+  // Is the given value `NaN`?
+  _.isNaN = function(obj) {
+    // `NaN` is the only value for which `===` is not reflexive.
+    return obj !== obj;
+  };
+
+  // Is a given value a boolean?
+  _.isBoolean = function(obj) {
+    return obj === true || obj === false || toString.call(obj) == '[object Boolean]';
+  };
+
+  // Is a given value a date?
+  _.isDate = function(obj) {
+    return toString.call(obj) == '[object Date]';
+  };
+
+  // Is the given value a regular expression?
+  _.isRegExp = function(obj) {
+    return toString.call(obj) == '[object RegExp]';
+  };
+
+  // Is a given value equal to null?
+  _.isNull = function(obj) {
+    return obj === null;
+  };
+
+  // Is a given variable undefined?
+  _.isUndefined = function(obj) {
+    return obj === void 0;
+  };
+
+  // Has own property?
+  _.has = function(obj, key) {
+    return hasOwnProperty.call(obj, key);
+  };
+
+  // Utility Functions
+  // -----------------
+
+  // Run Underscore.js in *noConflict* mode, returning the `_` variable to its
+  // previous owner. Returns a reference to the Underscore object.
+  _.noConflict = function() {
+    root._ = previousUnderscore;
+    return this;
+  };
+
+  // Keep the identity function around for default iterators.
+  _.identity = function(value) {
+    return value;
+  };
+
+  // Run a function **n** times.
+  _.times = function (n, iterator, context) {
+    for (var i = 0; i < n; i++) iterator.call(context, i);
+  };
+
+  // Escape a string for HTML interpolation.
+  _.escape = function(string) {
+    return (''+string).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\//g,'&#x2F;');
+  };
+
+  // If the value of the named property is a function then invoke it;
+  // otherwise, return it.
+  _.result = function(object, property) {
+    if (object == null) return null;
+    var value = object[property];
+    return _.isFunction(value) ? value.call(object) : value;
+  };
+
+  // Add your own custom functions to the Underscore object, ensuring that
+  // they're correctly added to the OOP wrapper as well.
+  _.mixin = function(obj) {
+    each(_.functions(obj), function(name){
+      addToWrapper(name, _[name] = obj[name]);
+    });
+  };
+
+  // Generate a unique integer id (unique within the entire client session).
+  // Useful for temporary DOM ids.
+  var idCounter = 0;
+  _.uniqueId = function(prefix) {
+    var id = idCounter++;
+    return prefix ? prefix + id : id;
+  };
+
+  // By default, Underscore uses ERB-style template delimiters, change the
+  // following template settings to use alternative delimiters.
+  _.templateSettings = {
+    evaluate    : /<%([\s\S]+?)%>/g,
+    interpolate : /<%=([\s\S]+?)%>/g,
+    escape      : /<%-([\s\S]+?)%>/g
+  };
+
+  // When customizing `templateSettings`, if you don't want to define an
+  // interpolation, evaluation or escaping regex, we need one that is
+  // guaranteed not to match.
+  var noMatch = /.^/;
+
+  // Certain characters need to be escaped so that they can be put into a
+  // string literal.
+  var escapes = {
+    '\\': '\\',
+    "'": "'",
+    'r': '\r',
+    'n': '\n',
+    't': '\t',
+    'u2028': '\u2028',
+    'u2029': '\u2029'
+  };
+
+  for (var p in escapes) escapes[escapes[p]] = p;
+  var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
+  var unescaper = /\\(\\|'|r|n|t|u2028|u2029)/g;
+
+  // Within an interpolation, evaluation, or escaping, remove HTML escaping
+  // that had been previously added.
+  var unescape = function(code) {
+    return code.replace(unescaper, function(match, escape) {
+      return escapes[escape];
+    });
+  };
+
+  // JavaScript micro-templating, similar to John Resig's implementation.
+  // Underscore templating handles arbitrary delimiters, preserves whitespace,
+  // and correctly escapes quotes within interpolated code.
+  _.template = function(text, data, settings) {
+    settings = _.defaults(settings || {}, _.templateSettings);
+
+    // Compile the template source, taking care to escape characters that
+    // cannot be included in a string literal and then unescape them in code
+    // blocks.
+    var source = "__p+='" + text
+      .replace(escaper, function(match) {
+        return '\\' + escapes[match];
+      })
+      .replace(settings.escape || noMatch, function(match, code) {
+        return "'+\n_.escape(" + unescape(code) + ")+\n'";
+      })
+      .replace(settings.interpolate || noMatch, function(match, code) {
+        return "'+\n(" + unescape(code) + ")+\n'";
+      })
+      .replace(settings.evaluate || noMatch, function(match, code) {
+        return "';\n" + unescape(code) + "\n;__p+='";
+      }) + "';\n";
+
+    // If a variable is not specified, place data values in local scope.
+    if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
+
+    source = "var __p='';" +
+      "var print=function(){__p+=Array.prototype.join.call(arguments, '')};\n" +
+      source + "return __p;\n";
+
+    var render = new Function(settings.variable || 'obj', '_', source);
+    if (data) return render(data, _);
+    var template = function(data) {
+      return render.call(this, data, _);
+    };
+
+    // Provide the compiled function source as a convenience for build time
+    // precompilation.
+    template.source = 'function(' + (settings.variable || 'obj') + '){\n' +
+      source + '}';
+
+    return template;
+  };
+
+  // Add a "chain" function, which will delegate to the wrapper.
+  _.chain = function(obj) {
+    return _(obj).chain();
+  };
+
+  // The OOP Wrapper
+  // ---------------
+
+  // If Underscore is called as a function, it returns a wrapped object that
+  // can be used OO-style. This wrapper holds altered versions of all the
+  // underscore functions. Wrapped objects may be chained.
+  var wrapper = function(obj) { this._wrapped = obj; };
+
+  // Expose `wrapper.prototype` as `_.prototype`
+  _.prototype = wrapper.prototype;
+
+  // Helper function to continue chaining intermediate results.
+  var result = function(obj, chain) {
+    return chain ? _(obj).chain() : obj;
+  };
+
+  // A method to easily add functions to the OOP wrapper.
+  var addToWrapper = function(name, func) {
+    wrapper.prototype[name] = function() {
+      var args = slice.call(arguments);
+      unshift.call(args, this._wrapped);
+      return result(func.apply(_, args), this._chain);
+    };
+  };
+
+  // Add all of the Underscore functions to the wrapper object.
+  _.mixin(_);
+
+  // Add all mutator Array functions to the wrapper.
+  each(['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift'], function(name) {
+    var method = ArrayProto[name];
+    wrapper.prototype[name] = function() {
+      var wrapped = this._wrapped;
+      method.apply(wrapped, arguments);
+      var length = wrapped.length;
+      if ((name == 'shift' || name == 'splice') && length === 0) delete wrapped[0];
+      return result(wrapped, this._chain);
+    };
+  });
+
+  // Add all accessor Array functions to the wrapper.
+  each(['concat', 'join', 'slice'], function(name) {
+    var method = ArrayProto[name];
+    wrapper.prototype[name] = function() {
+      return result(method.apply(this._wrapped, arguments), this._chain);
+    };
+  });
+
+  // Start chaining a wrapped Underscore object.
+  wrapper.prototype.chain = function() {
+    this._chain = true;
+    return this;
+  };
+
+  // Extracts the result from a wrapped and chained object.
+  wrapper.prototype.value = function() {
+    return this._wrapped;
+  };
+
+}).call(this);
diff --git a/snf-astakos-app/astakos/im/templates/im/account_base.html b/snf-astakos-app/astakos/im/templates/im/account_base.html
index 98ceb36..52aa1b7 100644
--- a/snf-astakos-app/astakos/im/templates/im/account_base.html
+++ b/snf-astakos-app/astakos/im/templates/im/account_base.html
@@ -1,4 +1,4 @@
-{% extends "im/base_two_cols.html" %}
+{% extends "im/base.html" %}
 
 {% load filters %}
 
@@ -13,24 +13,26 @@
 
 {% block page.nav.items %}
     {% for item in menu%}
-        <li class="{% if item|lookup:"is_active" %}active{% endif %}">
+        <li {% if item|lookup:"is_active" %}class="active"{% endif %}>
             <a href="{{ item|lookup:"url" }}">{{ item|lookup:"name" }}</a>
         </li>
     {% endfor %}
 {% endblock %}
     
 {% block page.body %}
-<div class="maincol {% block innerpage.class %}full{% endblock %}">
+<div class="{% block innerpage.class %}full{% endblock %}">
 {% block body %}{% endblock %}
 
     {% if PROFILE_EXTRA_LINKS %}
-    <div class="extra-buttons buttons-list fixpos">
+    <div class="buttons-list fixpos">
         {% for href, name in PROFILE_EXTRA_LINKS.items %}
             <a class="button back right" href="{{ href }}">{{ name }}</a>
         {% endfor %}
     </div>
     {% endif %}
+    
 
 </div>
 
 {% endblock %}
+ 
\ No newline at end of file
diff --git a/snf-astakos-app/astakos/im/templates/im/base.html b/snf-astakos-app/astakos/im/templates/im/base.html
index ba5f5b1..12d6ea1 100644
--- a/snf-astakos-app/astakos/im/templates/im/base.html
+++ b/snf-astakos-app/astakos/im/templates/im/base.html
@@ -1,8 +1,4 @@
 <!doctype html>
-<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
-<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
-<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
-<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
 <head>
   {% block starthead %}{% endblock starthead %}
   <meta charset="UTF-8">
@@ -30,27 +26,23 @@
   {% endblock page.favicons %}
 
   {% block page.css %}
-      <link href='https://fonts.googleapis.com/css?family=Antic' 
-        rel='stylesheet' type='text/css'>
-      <link rel="stylesheet" href="{{ IM_STATIC_URL }}css/styles.css" 
-        type='text/css'>
-      <link rel="stylesheet" href="{{ IM_STATIC_URL }}css/custom.css" 
-      type='text/css'>
+       
+      <link href="https://fonts.googleapis.com/css?family=Antic" rel="stylesheet" type="text/css">
+      <link rel="stylesheet" type="text/css" href="{{ IM_STATIC_URL }}css/global.css">
       <!--[if lte IE 7]>
-            <link rel="stylesheet" type="text/css" 
-            href="{{ IM_STATIC_URL }}im/css/ie7.css">
+            <link rel="stylesheet" type="text/css" href="{{ IM_STATIC_URL }}im/css/ie7.css">
       <![endif]-->
   {% endblock page.css %}
 
   {% block headjs %}
-      <script src="{{ IM_STATIC_URL }}js/modernizr-2.0.6.js"
-          type="text/javascript"></script>
-      <script src="{{ IM_STATIC_URL }}js/jquery.js" 
-          type="text/javascript"></script>
-      <script src="{{ IM_STATIC_URL }}js/jquery.infieldlabel.js" 
-          type="text/javascript"></script>
-      <script src="{{ IM_STATIC_URL }}js/forms.js" 
-          type="text/javascript"></script>
+  	  <script src="{{ IM_STATIC_URL }}js/jquery-1.7.1.min.js"></script>	
+  	  <script src="{{ IM_STATIC_URL }}js/jquery.dropkick-1.0.0.js"></script>
+  	  <script src="{{ IM_STATIC_URL }}js/os.js"></script>	
+      <script src="{{ IM_STATIC_URL }}js/modernizr-2.0.6.js"></script>	
+      <script src="{{ IM_STATIC_URL }}js/jquery.js"></script>	
+      <script src="{{ IM_STATIC_URL }}js/jquery.infieldlabel.js"></script>	
+      <script src="{{ IM_STATIC_URL }}js/forms.js"></script>	
+      <script src="{{ IM_STATIC_URL }}js/common.js"></script>
   {% endblock headjs %}
   {% block endhead %}{% endblock endhead %}
 
@@ -75,43 +67,48 @@
 </head>
 
 <body>
-    <div class='container'>
-        <div class='header'>
-            <div class="mainlogo">
-                <h1>accounts</h1>
-            </div>
-            
+    <div class="container">
+	    <div class="wrapper">       
+	        {% if messages or LOGIN_MESSAGES %}
+	        <div class="top-msg active">
+	            {% block extra_messages %}{% endblock %}
+	            {% for message in messages %}
+	            <div{% if message.tags %} 
+	                class="{{ message.tags }}"{% endif %}>
+	                {{ message|safe }}</div>
+	            {% endfor %}
+	            <a href="#" title="close" class="close">X</a>
+	        </div>
+	        {% endif %}
+	        <h1><img src="../static/im/images/accounts-logo.png" alt="accounts" /></h1>
             {% block page.nav %}
             <div class="navigation">
-            <ul class="mainnav inline">
-                {% block page.nav.items %}
-                {% endblock %}
-            </ul>
-            <ul class="mainnav inline subnav">
-                {% block page.subnav %}{%endblock %}
-            </ul>
+	            <ul>
+	                {% block page.nav.items %}
+	                {% endblock %}
+	            </ul>
+	            <ul>
+	                {% block page.subnav %}{%endblock %}
+	            </ul>
             </div>
             {% endblock %}
-        </div>
-        {% if messages or LOGIN_MESSAGES %}
-        <ul class="messages">
-            {% block extra_messages %}{% endblock %}
-            {% for message in messages %}
-            <li{% if message.tags %} 
-                class="{{ message.tags }}"{% endif %}>
-                {{ message }}</li>
-            {% endfor %}
-        </ul>
-        {% endif %}
-        <div class="page">
-            {% block page.body %}
-                <div class="maincol full">
-                    {% block body %}
-                    {% endblock %}
-                </div>
-            {% endblock %}
+	         
+	        
+	        <div class="content">
+	            {% block page.body %}
+	                <div class="full">
+	                    {% block body %}
+	                    {% endblock %}
+	                </div>
+	            {% endblock %}
+	        </div>
+	   </div>
+    </div>
+    <div class="footer">
+        <div class="wrapper">
+        	{% include "im/footer.html" %}
         </div>
     </div>
-    {% include "im/footer.html" %}
+    
 </body>
 </html>
diff --git a/snf-astakos-app/astakos/im/templates/im/base_two_cols.html b/snf-astakos-app/astakos/im/templates/im/base_two_cols.html
index dedec7c..5dc3cd1 100644
--- a/snf-astakos-app/astakos/im/templates/im/base_two_cols.html
+++ b/snf-astakos-app/astakos/im/templates/im/base_two_cols.html
@@ -1,12 +1,14 @@
 {% extends "im/base.html" %}
 
 {% block page.body %}
-<div class="maincol">
-    {% block body %}
-    {% endblock %}
-</div>
-<div class="rightcol">
-    {% block body.right %}
-    {% endblock %}
+<div class="two-cols clearfix">
+	<div class="rt">
+	    {% block body.right %}
+	    {% endblock %}
+	</div>
+	<div class="lt">
+	    {% block body.left %}
+	    {% endblock %}
+	</div>
 </div>
 {% endblock %}
diff --git a/snf-astakos-app/astakos/im/templates/im/feedback.html b/snf-astakos-app/astakos/im/templates/im/feedback.html
index fc512e0..6a23e36 100644
--- a/snf-astakos-app/astakos/im/templates/im/feedback.html
+++ b/snf-astakos-app/astakos/im/templates/im/feedback.html
@@ -11,7 +11,7 @@
     <div class="form-row submit">
         <input type="hidden" name="next" value="{{ next }}">
         <input type="hidden" name="auth" value="{{ user.auth_token }}">
-    <input type="hidden" name="username" value="{{ username }}">
+    	<input type="hidden" name="username" value="{{ username }}">
         <input type="submit" class="submit altcol" value="SEND" />
     </div>
   
diff --git a/snf-astakos-app/astakos/im/templates/im/footer.html b/snf-astakos-app/astakos/im/templates/im/footer.html
index c4f148d..81345ff 100644
--- a/snf-astakos-app/astakos/im/templates/im/footer.html
+++ b/snf-astakos-app/astakos/im/templates/im/footer.html
@@ -1,9 +1,8 @@
-<div class="footer">
-    {% block footer_content %}
-    <div class="last row clearme">
-        Copyright 2011-2012 <a href="http://www.grnet.gr" alt="GRNET S.A.">GRNET S.A.</a> All rights reserved.
-        <div class="termslink" style="float:right"><a href="{% url latest_terms %}">Terms of use</a></div>
-    </div>
-    {% endblock %}
+{% block footer_content %}
+<div class="clearfix">
+    <p class="termslink" style="float:right"><a href="{% url latest_terms %}">Terms of use</a></p>
+    <p>Copyright 2011-2012 <a href="http://www.grnet.gr" alt="GRNET S.A.">GRNET S.A.</a> All rights reserved.</li></p>
 </div>
+{% endblock %}
+ 
 
diff --git a/snf-astakos-app/astakos/im/templates/im/form_render.html b/snf-astakos-app/astakos/im/templates/im/form_render.html
index 0c63d01..2119187 100644
--- a/snf-astakos-app/astakos/im/templates/im/form_render.html
+++ b/snf-astakos-app/astakos/im/templates/im/form_render.html
@@ -11,6 +11,12 @@
      <p class="{% if field.blank %}required{% endif %}">
         {{ field.label_tag }}
         {{ field|safe }}
-        </p>
-    </div>
+        {%  if field.help_text %}
+        	<span class="info"> 
+			    <em>more info</em>
+			    <span>{{ field.help_text|safe }}</span>
+		    </span>
+        {% endif %}
+     </p>
+</div>
 {% endfor %}
diff --git a/snf-astakos-app/astakos/im/templates/im/invitations.html b/snf-astakos-app/astakos/im/templates/im/invitations.html
index 5d75ef3..31ff8d3 100644
--- a/snf-astakos-app/astakos/im/templates/im/invitations.html
+++ b/snf-astakos-app/astakos/im/templates/im/invitations.html
@@ -1,48 +1,50 @@
 {% extends "im/account_base.html" %}
 
 {% block page.body %}
-<div class="maincol {% block innerpage.class %}{% endblock %}">
-    <div class="section">
-        <h2>You have <em>{{ inviter.invitations }}</em> invitation{{ inviter.invitations|pluralize }} left.</h2>
-        {% if sent|length %}
-          <table class="zebra-striped id-sorted">
-            <thead>
-              <tr>
-                <th>Email</th>
-                <th>Real Name</th>
-                <th>Used</th>
-              </tr>
-            </thead>
-            <tbody>
-              {% for inv in sent %}
-              <tr class="{% if inv.is_consumed %}used{% endif %}">
-                <td>{{ inv.email }}</td>
-                <td>{{ inv.realname }}</td>
-                <td class="consumed">{% if inv.is_consumed %}Yes{% else %}No{% endif %}</td>
-              </tr>
-              {% endfor %}
-            </tbody>
-        </table>
-        {% else %}
-            <p>No invitations sent</p>
-        {% endif %}
-    </div>
+<div class="two-cols clearfix">
+	<div class="rt">
+	 {% if inviter.invitations %}
+	  <form action="{% url astakos.im.views.invite %}" method="post"
+	    class="innerlabels">{% csrf_token %}
+	    <h2>INVITE SOMEONE ELSE</h2>
+	    {% with invitation_form as form %}
+	    {% include "im/form_render.html" %}
+	    {% endwith %}
+	
+	    <div class="form-row submit">
+	        <input type="submit" class="submit altcol" value="SEND" />
+	    </div>
+	  </form>
+	  {% endif %}
+	</div>
+	<div class="lt {% block innerpage.class %}{% endblock %}">
+	    
+	    <h2>You have <em>{{ inviter.invitations }}</em> invitation{{ inviter.invitations|pluralize }} left.</h2>
+	    {% if sent|length %}
+	      <table class="zebra-striped id-sorted">
+	        <thead>
+	          <tr>
+	            <th>Email</th>
+	            <th>Real Name</th>
+	            <th>Used</th>
+	          </tr>
+	        </thead>
+	        <tbody>
+	          {% for inv in sent %}
+	          <tr class="{% if inv.is_consumed %}used{% endif %}">
+	            <td>{{ inv.email }}</td>
+	            <td>{{ inv.realname }}</td>
+	            <td class="consumed">{% if inv.is_consumed %}Yes{% else %}No{% endif %}</td>
+	          </tr>
+	          {% endfor %}
+	        </tbody>
+	    </table>
+	    {% else %}
+	        <p>No invitations sent</p>
+	    {% endif %}
+	</div>     
 </div>
 
-<div class="rightcol">
- {% if inviter.invitations %}
-  <form action="{% url astakos.im.views.invite %}" method="post"
-    class="innerlabels">{% csrf_token %}
-    <h2>INVITE SOMEONE ELSE</h2>
-    {% with invitation_form as form %}
-    {% include "im/form_render.html" %}
-    {% endwith %}
 
-    <div class="form-row submit">
-        <input type="submit" class="submit altcol" value="SEND" />
-    </div>
-  </form>
-  {% endif %}
-</div>
 {% endblock %}
 
diff --git a/snf-astakos-app/astakos/im/templates/im/login_base.html b/snf-astakos-app/astakos/im/templates/im/login_base.html
index 227fc12..e394309 100644
--- a/snf-astakos-app/astakos/im/templates/im/login_base.html
+++ b/snf-astakos-app/astakos/im/templates/im/login_base.html
@@ -9,57 +9,50 @@
 {% endblock %}
 
 {% block signup_class %}hidden{% endblock %}
-{% block page.title %}
-Login
-{% endblock %}
+{% block page.title %}{% endblock %}
 
-{% block body %}
-<div class="section">
-    <img class="pic" src="{{ IM_STATIC_URL }}images/pictures/login_pic.png" />
-</div>
-{% comment %}{% include "im/services_description.html" %}{% endcomment %}
-{% endblock body %}
+{% block body.left %}
+	<img class="pic" src="{{ IM_STATIC_URL }}images/porta.png" />
+	{% comment %}{% include "im/services_description.html" %}{% endcomment %}
+{% endblock body.left %}
     
-{% block body.right %}
-<div class="section">
-     {% if "local" in im_modules %}
-        <form action="{% url astakos.im.target.local.login %}" method="post"
-            class="login innerlabels">{% csrf_token %}
-            <h2 class="formheader"><span>LOGIN</span></h2>
-            {% with login_form as form %}
-            {% include "im/form_render.html" %}
-            {% endwith %}
-            <input type="hidden" name="next" value="{{ next }}">
-            <div class="form-row submit">
-                <input type="submit" class="submit altcol" value="SUBMIT" />
-                <a class="extra-link" href="{% url django.contrib.auth.views.password_reset %}">Forgot your password?</a>
-            </div>
-        </form>
-      {% endif %}
+{% block body.right %} 
+	{% if "local" in im_modules %}
+    	<form action="{% url astakos.im.target.local.login %}" method="post"class="login innerlabels">{% csrf_token %}
+		    <h2>LOGIN</h2>
+		    {% with login_form as form %}
+		    	{% include "im/form_render.html" %}
+		    {% endwith %}
+		    <input type="hidden" name="next" value="{{ next }}">
+		    <div class="form-row submit">
+		        <input type="submit" class="submit altcol" value="SUBMIT" />
+		        <a class="extra-link" href="{% url django.contrib.auth.views.password_reset %}">Forgot your password?</a>
+		    </div>
+    	</form>
+    {% endif %}
 
-          <div class="extralogin">
-              {% for o in im_modules %}
-              <div>
-            {% if o != 'local' %}
-            LOGIN using
-            <a href="/im/login/{{ o }}{% ifnotequal next "" %}&next={{ next|urlencode }}{% endifnotequal %}{% ifnotequal code ""%}{% if next != "" %}&{% else %}?{% endif %}code={{ code }}{% endifnotequal %}"
-                alt="{{ o|title }}">{{ o }}</a>
-            {% endif %}
-            </div>
-            {% endfor %}
+    <div class="extralogin">
+         {% for o in im_modules %}
+    	<div>
+        {% if o != 'local' %}
+        LOGIN using
+        	<a href="/im/login/{{ o }}{% ifnotequal next "" %}&next={{ next|urlencode }}{% endifnotequal %}{% ifnotequal code ""%}{% if next != "" %}&{% else %}?{% endif %}code={{ code }}{% endifnotequal %}"
+            alt="{{ o|title }}">{{ o }}</a>
+        {% endif %}
         </div>
-        {% block body.signup %}
-        {% for o in im_modules %}
-            {% if o != 'local' %}
-            <br />
-            {% endif %}
         {% endfor %}
-        <div class="bottom">
-            {% block body.login.signup %}
-                new to okeanos ? <a href="{% url astakos.im.views.signup %}{% ifnotequal code "" %}?code={{ code|urlencode }}{% endifnotequal %}">CREATE ACCOUNT</a>
-            {% endblock %}
-            </div>
-        </div>
-        {% endblock %}
     </div>
-{% endblock %}
+    {% block body.signup %}
+	    {% for o in im_modules %}
+	        {% if o != 'local' %}
+	        <br />
+	        {% endif %}
+	    {% endfor %}
+	    <div class="bottom">
+	        {% block body.login.signup %}
+	            new to okeanos ? <a href="{% url astakos.im.views.signup %}{% ifnotequal code "" %}?code={{ code|urlencode }}{% endifnotequal %}">CREATE ACCOUNT</a>
+	        {% endblock %}
+	    </div>
+	{% endblock body.signup %}
+ 
+{% endblock body.right%}
diff --git a/snf-astakos-app/astakos/im/templates/im/profile.html b/snf-astakos-app/astakos/im/templates/im/profile.html
index ffc0651..277a7e3 100644
--- a/snf-astakos-app/astakos/im/templates/im/profile.html
+++ b/snf-astakos-app/astakos/im/templates/im/profile.html
@@ -2,8 +2,7 @@
 
 {% block body %}
 
-<form action={%url astakos.im.views.edit_profile %} method="post"
-    class="withlabels">{% csrf_token %}
+<form action={%url astakos.im.views.edit_profile %} method="post" class="withlabels">{% csrf_token %}
     
     {% with profile_form as form %}
     {% include "im/form_render.html" %}
diff --git a/snf-astakos-app/astakos/im/templates/im/signup.html b/snf-astakos-app/astakos/im/templates/im/signup.html
index c5e5a0a..a2252dd 100644
--- a/snf-astakos-app/astakos/im/templates/im/signup.html
+++ b/snf-astakos-app/astakos/im/templates/im/signup.html
@@ -5,12 +5,10 @@
     Signup
 {% endblock %}
 
-{% block body %}
-<div class="section">
+{% block body.left %}
     <img class="pic" src="{{ IM_STATIC_URL }}images/pictures/signup_pic.png" />
-</div>
 {% comment %}{% include "im/services_description.html" %}{% endcomment %}
-{% endblock body %}
+{% endblock body.left %}
 
 {% block body.right %}
     {% if "local" in im_modules %}
diff --git a/snf-astakos-app/astakos/im/views.py b/snf-astakos-app/astakos/im/views.py
index 00cf8b5..4b7efff 100644
--- a/snf-astakos-app/astakos/im/views.py
+++ b/snf-astakos-app/astakos/im/views.py
@@ -262,7 +262,7 @@ def edit_profile(request, template_name='im/profile.html', extra_context={}):
                 next = request.POST.get('next')
                 if next:
                     return redirect(next)
-                msg = _('Profile has been updated successfully')
+                msg = _('<p>Profile has been updated successfully</p>')
                 messages.add_message(request, messages.SUCCESS, msg)
             except ValueError, ve:
                 messages.add_message(request, messages.ERROR, ve)
@@ -415,7 +415,7 @@ def logout(request, template='registration/logged_out.html', extra_context={}):
         response['Location'] = LOGOUT_NEXT
         response.status_code = 301
         return response
-    messages.add_message(request, messages.SUCCESS, _('You have successfully logged out.'))
+    messages.add_message(request, messages.SUCCESS, _('<p>You have successfully logged out.</p>'))
     context = get_context(request, extra_context)
     response.write(render_to_string(template, context_instance=context))
     return response