Responsive with initial-scale:1.0

diff --git a/snf-astakos-app/astakos/im/static/im/cloudbar/cloudbar.css b/snf-astakos-app/astakos/im/static/im/cloudbar/cloudbar.css
index 8444077..6d0dfb9 100644 (file)
--- a/snf-astakos-app/astakos/im/static/im/cloudbar/cloudbar.css
+++ b/snf-astakos-app/astakos/im/static/im/cloudbar/cloudbar.css
@@ -145,7 +145,7 @@
 
 
 /* cloudbar header */
-.cloudbar                                       { background:#000; color:#fff;  height:35px; line-height:35px; }       
+.cloudbar                                       { background:#000; color:#fff;    line-height:35px; }  
 .cloudbar .wrapper                              { width:auto; padding:0;}                      
 .cloudbar a                                     { color:#fff; text-decoration:none;}
 .cloudbar .profile                              { float:right; background:#01A1AE; min-width:150px; padding:0 20px; text-align:right;  }

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 b84d187..abdb12d 100644 (file)
--- a/snf-astakos-app/astakos/im/static/im/cloudbar/cloudbar.js
+++ b/snf-astakos-app/astakos/im/static/im/cloudbar/cloudbar.js
@@ -32,7 +32,7 @@ $(document).ready(function(){
     }
 
     var root = $('body');
-    var bar = $('<div class="cloudbar"></div>');
+    var bar = $('<div class="cloudbar clearfix"></div>');
     var services = $('<ul class="services"></ul>');
     var profile = $('<div class="profile"></div>');
     

diff --git a/snf-astakos-app/astakos/im/static/im/css/forms.css b/snf-astakos-app/astakos/im/static/im/css/forms.css
index cca4a1a..aae5aea 100644 (file)
--- a/snf-astakos-app/astakos/im/static/im/css/forms.css
+++ b/snf-astakos-app/astakos/im/static/im/css/forms.css
@@ -85,7 +85,8 @@ form input[readonly=true]                                     { /*background-color: #ddd;*/ color: #5e5e5e; }
 form.innerlabels .with-checkbox .checkbox-widget       { margin-top:15px; }\r
 form.innerlabels .with-checkbox .checkbox-label                { left:2.5em; top:17px; }\r
 \r
-form .extra-img                                                                { display:block; width:21px; height:21px; overflow:hidden;  position:absolute; left:440px;top:10px; z-index:101;}\r
+form .extra-img                                                                { display:block; width:21px; height:21px; overflow:hidden;  position:absolute; left:440px; bottom:10px; z-index:101;}\r
+form .with-checkbox .extra-img                         { top:20px; } \r
 form .with-errors .extra-img                           { background:url(../images/symbols.png) no-repeat -58px -3px;}\r
 form .with-errors textarea+.extra-img,\r
 form .with-errors noscript+.extra-img          { background:transparent;}\r
@@ -95,5 +96,9 @@ form.innerlabels .with-errors .extra-img      { left:290px;}
 form input[readonly="True"]+ span.extra-img { background:url(../images/symbols.png) no-repeat -111px -3px;}\r
 .errorlist                                                                     { margin:0; padding:0;}\r
 .errorlist li                                                          { list-style:none outside;}\r
+ \r
+@media screen and (max-width : 583px)          { \r
+    form .extra-img    { left:222px; }\r
+    .form-error                { margin-left:0!important; } \r
 \r
-\r
+}
\ No newline at end of file

diff --git a/snf-astakos-app/astakos/im/static/im/css/max480.css b/snf-astakos-app/astakos/im/static/im/css/max480.css
new file mode 100644 (file)
index 0000000..47efa34
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/css/max480.css
@@ -0,0 +1,3 @@
+.container .navigation ul li                                   { display:block; }
+.two-cols-blog .rt                                                             { width:auto; padding-right:0; margin-left:0; float:none;}
+.resources .categories ul li                                   { display:block; float:none;}

diff --git a/snf-astakos-app/astakos/im/static/im/css/max768.css b/snf-astakos-app/astakos/im/static/im/css/max768.css
new file mode 100644 (file)
index 0000000..b6c9247
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/css/max768.css
@@ -0,0 +1,7 @@
+.two-cols  .rt                                                                         { float:none; width:auto; margin-bottom:10px;}
+.two-cols  .lt                                                                 { float:none; width:auto; }
+.container .navigation                                                         { height:auto; margin-bottom:30px; } 
+.bg-wrap                                                                               { background-position:-9999px -9999px; }
+.buttons-list.fixpos                                                   { position:static;  }
+.buttons-list .button                                                  { margin-left:0; }
+form input.submit, form input[type="submit"]   { margin:0; }

diff --git a/snf-astakos-app/astakos/im/static/im/css/max960.css b/snf-astakos-app/astakos/im/static/im/css/max960.css
new file mode 100644 (file)
index 0000000..39a140b
--- /dev/null
+++ b/snf-astakos-app/astakos/im/static/im/css/max960.css
@@ -0,0 +1,8 @@
+.container                                             { width:100%; }
+.wrapper                                               { width:83%; padding:36px 8% 36px 8%;}
+.footer .wrapper                                               { padding-left:8%; padding-right:8%; }
+.two-cols  .rt                                                         { width:45% }
+.two-cols .rt img                                              { max-width:100%; }
+.two-cols  .lt                                                 { width:45%; }
+.two-cols-blog .rt                                             { width:25%; padding-right:0; margin-left:30px;}
+.top-msg                                                               { margin-left:-9%; margin-right:-9%; padding-left:20%; padding-right:20%; }

diff --git a/snf-astakos-app/astakos/im/static/im/css/modules.css b/snf-astakos-app/astakos/im/static/im/css/modules.css
index fd10a04..098ab0e 100644 (file)
--- a/snf-astakos-app/astakos/im/static/im/css/modules.css
+++ b/snf-astakos-app/astakos/im/static/im/css/modules.css
@@ -12,7 +12,7 @@ img.right                                                             { margin:0 0 1em 1em; float:right;}
 .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; } \r
 .footer:hover a                                 { color:#808080;}\r
 .footer a:hover                                 { color:#000;}\r
-.footer ul                                      { float:left; margin:0 0 0 22px; width:140px;  padding:0;}\r
+.footer ul                                      { float:left; margin:0 22px 0 0; width:140px;  padding:0;}\r
 .footer ul li                                   { padding:0; margin:0; list-style:none outside;}\r
 .footer ul li:first-child                       { margin-bottom:1em;   }\r
 .footer .clearfix                               { padding-bottom:20px;}\r
@@ -33,8 +33,7 @@ img.right                                                             { margin:0 0 1em 1em; float:right;}
 .mainlogo h1                                                                   { line-height:100%; font-size:1em; }\r
 .container .navigation                          { margin:20px 0 0; font-size:1.154em; height:95px;}\r
 .container .navigation ul                       { margin:5px 0; padding:0;}\r
-.container .navigation ul li                    { list-style:none outside; padding:0; margin:0 0 0 1em; display:inline-block;}\r
-.container .navigation ul li:first-child        { margin-left:0;}\r
+.container .navigation ul li                    { list-style:none outside; padding:0; margin:0 1em 0 0; display:inline-block;}\r
 .container .navigation ul li a                  { color:#000; text-decoration:none; }\r
 .container .navigation ul li a:hover            { color:#F89A1C; }     \r
 .container .navigation ul li.active a           { color:#F89A1C; }                                     \r
@@ -55,6 +54,7 @@ img.right                                                             { margin:0 0 1em 1em; float:right;}
 .landing h2, .landing a:hover                   { color:#01A1AE;}\r
 .faq h2, .faq a:hover, .faq .current a          { color:#EF4F54; border:0 none;}\r
 .content .question h2                                                  { color:#4085A6 }\r
+.content .backlink                                                             { margin:1em 0; }\r
 .content .question .backlink a                                 { border:0 none; color:#F89A1C }\r
 .content .question .backlink a:hover                   { text-decoration:underline; }\r
 .faq h3                                                                                        { color:#4085a6; margin:0;}\r
@@ -71,7 +71,7 @@ img.right                                                             { margin:0 0 1em 1em; float:right;}
 .follow ul li p a                               { color:#808080;}   \r
 .posts ul                                       { margin:0;padding:0; }\r
 .posts ul li                                    { padding:0; margin:0 0 50px; list-style:none outside; }\r
-.posts ul li img                                { max-width:580px; margin-bottom:1em;}\r
+.posts ul li img                                { max-width:100%; margin-bottom:1em;}\r
 .posts ul li p.info                             { padding-bottom:10px; margin-bottom:20px; font-size:0.769em; color:#808080; background:url(../images/dots.jpg) repeat-x bottom ;}\r
 .article p.info                                                                { margin-top:20px; padding-top:10px; font-size:0.769em; color:#808080; }\r
 .article h2, .posts h2                          { color:#ef4f53; }\r
@@ -125,7 +125,7 @@ a.videolink:hover                                           { background:url(../images/video_image.png)
 .resources .categories ul li a.selected         { color: #000000 }\r
 .resources .categories ul li.inactive           { opacity: 0.3; }\r
 .resources .categories ul li.active             { font-weight: bold; opacity: 1; }\r
-.resources .list                                { line-height: 1em; margin-top: 60px; position: relative; width:855px; }\r
+.resources .list                                { line-height: 1em; margin-top: 60px; position: relative; margin-right:-35px; }\r
 .resources .list .resource-wrapper.first .resource      { margin-left: 0; }\r
 .resources .list .resource-wrapper              { float: left; height: 250px; margin-bottom: 22px; margin-right: 35px; overflow: hidden; position: relative; width: 250px; }\r
 .resources .list .resource-wrapper.first        { margin-left: 0; }\r
@@ -170,8 +170,9 @@ table td.consumed                                                           { color: #9D261D; }
 .button.back.right                                                             { right: 0; }\r
 .buttons-list .button                                                  { margin-left: 10px; }\r
 .button.back                                                                   {  z-index: 500; }\r
-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;}\r
-a.button:hover                                                                 { background-color: #F89A1C; border:0 none; color:#fff;}\r
+/* Styles for blue button-like back link\r
+a.button                                                                               { border:0 none;  color: #FFFFFF;  display: inline-block;  text-align: center; background-color: #3582AC; letter-spacing: 1px;  line-height: 22px; padding: 0.8em 22px; text-decoration: none;}\r
+a.button:hover                                                                 { background-color: #F89A1C; border:0 none; color:#fff;}*/\r
 \r
 /*pagination*/\r
 .pagination a                                   { border:0 none;}\r

diff --git a/snf-astakos-app/astakos/im/static/im/js/common.js b/snf-astakos-app/astakos/im/static/im/js/common.js
index e336d01..3e1779c 100644 (file)
--- a/snf-astakos-app/astakos/im/static/im/js/common.js
+++ b/snf-astakos-app/astakos/im/static/im/js/common.js
@@ -48,6 +48,7 @@ $(document).ready(function() {
        }\r
        \r
        $('.top-msg a.close').click(function(e) {\r
+               e.preventDefault();\r
         $('.top-msg').animate({\r
             paddingTop:'0',\r
             paddingBottom:'0',\r

diff --git a/snf-astakos-app/astakos/im/templates/im/base.html b/snf-astakos-app/astakos/im/templates/im/base.html
index 7a93b51..cfc74e9 100644 (file)
--- a/snf-astakos-app/astakos/im/templates/im/base.html
+++ b/snf-astakos-app/astakos/im/templates/im/base.html
@@ -32,6 +32,9 @@
       <!--[if lte IE 7]>
             <link rel="stylesheet" type="text/css" href="{{ IM_STATIC_URL }}css/ie7.css">
       <![endif]-->
+      <link rel="stylesheet" media="screen and (max-width: 960px)" href="{{ IM_STATIC_URL }}css/max960.css"/>
+      <link rel="stylesheet" media="screen and (max-width: 768px)" href="{{ IM_STATIC_URL }}css/max768.css"/>  
+      <link rel="stylesheet" media="screen and (max-width: 480px)" href="{{ IM_STATIC_URL }}css/max480.css"/>  
   {% endblock page.css %}
 
   {% block headjs %}

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 fc21456..76cf8cd 100644 (file)
--- a/snf-astakos-app/astakos/im/templates/im/form_render.html
+++ b/snf-astakos-app/astakos/im/templates/im/form_render.html
@@ -8,7 +8,7 @@
 {% for field in form %}
 <div class="form-row {% if field.errors|length %}with-errors{% endif %}">
         {{ field.errors }}
-     <p class="{% if field.blank %}required{% endif %}">
+     <p class="clearfix {% if field.blank %}required{% endif %}">
         {{ field.label_tag }}
         {{ field|safe }}
         <span class="extra-img">&nbsp;</span>