How it works page
authorOlga Brani <olgabrani@grnet.gr>
Fri, 30 Nov 2012 15:42:21 +0000 (17:42 +0200)
committerOlga Brani <olgabrani@grnet.gr>
Fri, 30 Nov 2012 15:42:21 +0000 (17:42 +0200)
snf-astakos-app/astakos/im/static/im/cloudbar/cloudbar.css
snf-astakos-app/astakos/im/static/im/css/modules.css
snf-astakos-app/astakos/im/static/im/images/how_it_works.png [new file with mode: 0644]
snf-astakos-app/astakos/im/static/im/js/common.js
snf-astakos-app/astakos/im/templates/im/astakosgroup_detail.html
snf-astakos-app/astakos/im/templates/im/astakosgroup_list.html
snf-astakos-app/astakos/im/templates/im/how_it_works.html [new file with mode: 0644]
snf-astakos-app/astakos/im/templates/im/profile.html
snf-astakos-app/astakos/im/urls.py
snf-astakos-app/astakos/im/views.py

index f5db0b5..4e34f93 100644 (file)
@@ -18,14 +18,14 @@ div.cloudbar li                                                             {font-family:'Open Sans',sans-serif !important; letter-s
 .cloudbar .profile:hover                                               { background:#5A97B8; }
 .cloudbar .profile a                            { text-decoration:none; color:#fff; display:block; width:100%;}
 .cloudbar .profile ul                           { position:absolute;   right:0; top:35px; padding:0; margin:0;  width:190px; display:none;     z-index:9; background:#fff;}
-.cloudbar .profile ul li                        { list-style:none outside; line-height:35px; padding:0 20px;}
+.cloudbar .profile ul li                        { list-style:none outside; line-height:35px; padding:0 45px 0  20px;}
 .cloudbar .profile ul li:hover a                               { color:#3582AC;}
-.cloudbar .profile .user a                                             { padding-right:20px; width:auto; }
+.cloudbar .profile  a                                                  { padding-right:20px; width:auto; }
 .cloudbar .profile .user a span                                        { padding:0 20px;   background:url(../images/arrow-lt.png) no-repeat right center;}
 .cloudbar .profile .full a span                 { background-image:url(../images/arrow-down.png); }
 .cloudbar .profile .full a.open span                   { background-image:url(../images/arrow-up.png); }
 .cloudbar .profile .full ul                                    { border:1px dashed #000; border-top:0 none; border-right:0 none;}
-.cloudbar .profile ul li a                      { padding-right:0; background:none; color:#000; display:inline; width:auto;}
+.cloudbar .profile ul li a                      { padding-right:0; background:none; color:#000; display:block; width:100%;}
 .cloudbar ul.services                           { margin:0; padding:0; }
 .cloudbar ul.services li                        { float:left; height:35px; line-height:35px; text-align:center; padding: 0 30px; list-style:none outside;}
 .cloudbar ul.services li:first-child            { padding:0 5px;}
index 807401a..8e2438e 100644 (file)
-body                                                                                   { overflow-y: scroll;}\r
-\r
-.wrapper                                        { margin:0 auto; position:relative; width:820px; padding:36px 70px; }\r
-.container .wrapper,\r
-.footer .wrapper                                { border: 1px solid #808080; border-top:0 none;}\r
-.footer .wrapper                                                               { padding:20px 70px 25px; }\r
-.centered                                       { text-align:center;}\r
-img.left                                                               { margin:0 1em 1em 0; float:left;}\r
-img.right                                                              { margin:0 0 1em 1em; float:right;}\r
-\r
\r
-/* footer */\r
-.footer                                         { font-size:0.923em;color:#B3B3B3; }\r
-.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 10px 0 0; width:125px;  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
-.footer .clearfix ul:first-child                { margin-left:0;}\r
-\r
-\r
-/*top message*/\r
-.top-msg                                           { margin:-36px -70px 36px; background:blue; padding:50px; color:#fff; display:none; position:relative; font-size:1.538em; text-align:center;}\r
-.top-msg p                                                                             { text-align:center; }\r
-.top-msg p.title                                   { font-size:1.3em;  }\r
-.top-msg p.title span                          { border-bottom:2px dotted #fff; padding:0 0 10px 0;}\r
-.top-msg.active                                { display:block;}\r
-.top-msg +.mainlogo                             { margin-top:-73px;}\r
-.top-msg .close                                 { position:absolute; bottom:20px; right:20px; font-size:1.3em;  border:0 none; color:#fff; text-decoration:none;}\r
-.top-msg .close:hover                           { color:#000;}\r
-.top-msg.success                               { background-color:#77C596; color: #fff}\r
-.top-msg.error                                 { background-color:#EF4F54; color: #fff}\r
-.top-msg.warning                                { background-color:#F6921E; color: #fff}\r
-.top-msg.info                                  { background-color:#C3C3B9; color: #fff}\r
-.top-msg.warning a                              { color: #3582AC}\r
-.top-msg.info a                                 { color: #222}\r
-\r
-/* container */\r
-.container .wrapper                             { padding-bottom:100px;}\r
-.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 + ul                                 { font-size:0.933em; }\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
-\r
-.dotted                                         { background:url(../images/double-dots.jpg) no-repeat bottom center; padding:0 0 30px; margin-bottom:30px;}\r
-.full-dotted                                                                   { background:url(../images/dots.jpg) repeat-x top; margin-top:20px; padding-top:20px; }\r
-.full-dotted:first-child                                               { background:none; padding-top:0; margin-top:0; }\r
-.two-cols .rt                                   { float:right; width:400px;}\r
-.two-cols .lt                                   { float:left; width:400px;}\r
-.two-cols-blog .rt                              { float:right; width:220px; margin-left:80px; padding-right:65px;}\r
-.two-cols-blog .lt                                 { overflow:hidden;}\r
-.container h2                                                                  { font-weight:normal; font-size:1.308em; margin-bottom:1em; }\r
-.container h3                                                  { font-weight:normal; margin-bottom:1em; }\r
-.container h2 em                                                               { color: #3582AC; font-style:normal; }\r
-/*.content a                                                           { border-bottom: 1px solid #F89A1C; text-decoration:none; color:#000; }\r
-.content a:hover                                                   { border-bottom: 1px solid #F89A1C; text-decoration:none; color:#F89A1C; }*/\r
-\r
-\r
-.content a                                                             { text-decoration:none; }\r
-.content a:hover                                                   { text-decoration:underline; }\r
-\r
-.container ul.options                           { padding:0; margin:0; font-size:1.154em;}\r
-.container ul.options li                        { list-style:none outside; margin:0 0 1em 0;padding:0;}\r
-.container ul.options li h3                                            { font-size:1em; margin-bottom:0; }\r
-.container ul.options li a                                     { border:0 none;}\r
-.container ul.options li a:hover                               { text-decoration:underline;}\r
-.container .extra ul.options                                   { font-size:1em; margin:0 ; padding:15px; }\r
-.landing h2, .landing a:hover                   { color:#01A1AE;}\r
-.faq h2, .faq a:hover, .faq .current a          { color:#EF4F54; border:0 none;}\r
-.faq .current a                                                                        { text-decoration:underline }\r
-.question h2                                                                   { color:#EF4F54 }\r
-.content .backlink                                                             { margin:1em 0; }\r
-.faq h3                                                                                        { color:#4085a6; margin:0;}\r
-.faq ul                                         { padding:0; margin:0; }\r
-.faq ul li                                      { padding:0; margin:0 0 8px 0; list-style:none outside none;line-height:140%;  }\r
-.faq ul li a                                    { color:#222222; border:0 none; } \r
-.faq .faq-category                                                             { margin: 0 0 1.5em;}\r
-.follow h3 a                                    { color:#4085A6;}\r
-.follow a                                                      { border:0 none;}\r
-.follow ul                                      { margin:0; padding:0;}\r
-.follow ul li                                   { list-style:none outside; padding:0; margin:0 0 20px 0; font-size:0.923em; color:#808080;}\r
-.follow ul li p.title                           { margin-bottom:0; color:#000;}\r
-.follow ul li p.title a                         { color:#000;}\r
-.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:100%; margin-bottom:1em;}\r
-.posts ul li p.info                             { padding-bottom:10px; margin:20px 0; 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
-.posts h2 a, .posts h2 a:hover                  { border:0 none;color:#ef4f53;}\r
-.posts p.date, .article p.date                  { margin:0; font-size:1.077em; color:#3582AC; }\r
-p.info a                                        { color:#808080; border-bottom:0 none; }\r
-p.info a:hover                                  { color:#000; border-bottom:0 none;}\r
-.bg-wrap                                        { background-position:right top; background-repeat:no-repeat;}\r
-.bg-wrap .extra                                 { display:none;}\r
-.bg-wrap.open .extra                            { display:block;}\r
-.bg-wrap .extra .hide-extra                     { display:block; text-align:right; border:0 none; height:16px; overflow:hidden;}\r
-.bg-wrap .extra .hide-extra img                 { margin-top:0; vertical-align:top; display:inline; }\r
-.bg-wrap .extra .hide-extra:hover img           { margin-top:-32px;}\r
-.pithos h2,                       \r
-.pithos .extra .options li h3                   { color:#BC742B; }\r
-.cyclades h2,                 \r
-.cyclades .extra .options li h3                 { color:#00A1B0; }\r
-a.btn_01                                        { display:block; text-align:center; background:#F6921E; color:#000; padding:10px; text-decoration:none; border:0 none;}\r
-a.btn_01:hover                                  { background:#3582AC; color:#000; text-decoration:none;}\r
-a.btn_01 em                                     { font-style:normal; display:block; }\r
-a.btn_01 span                                   { color:#fff; }\r
-.lt .box-more                                   { text-align:center; padding:5px 10px; }\r
-.lt .box-more.border                            { border:1px solid #ccc;}\r
-.lt .box-more p                                 { cursor:pointer; background:url(../images/arrow_02.jpg) no-repeat right center; padding-right:20px; }\r
-a.btn_01, .box-more                             { width:80%; margin:0 auto 20px; }\r
-.lt .box-more ul.col                            { width:30%; margin:0; padding:0; vertical-align:top; text-align:left; display:inline-block;}\r
-.lt .box-more .clearfix                         { display:none; }\r
-.lt .box-more ul.col li                         { list-style:none outside; }\r
-.lt .box-more ul.col li a                       { color:#B3B3B3; text-decoration:none; border:0 none;}\r
-.lt .box-more ul.col li a:hover                 { color:#000;}\r
-.article img                                                       { margin-bottom:1em; max-width:100%;}\r
-a.videolink                                                        { border: 0 none; display:block; width:367px; height:207px; background:url(../images/video_image_hover.png) no-repeat; text-decoration:none;}\r
-a.videolink:hover                                              { background:url(../images/video_image.png)no-repeat; text-decoration:none; border:0 none;}\r
-.container .full                                                               { position:relative;}\r
-.container .bottom-bordered                     { border-bottom:1px dashed #000000;margin-bottom:20px }\r
-.container .lt-div                              { width:234px; float:left; }\r
-.container .overflow-hidden                     { overflow:hidden;}\r
-.documentation .wrap                                                   { width:500px; }\r
-\r
-\r
-/* resources*/\r
-.resources .categories .clear                  { color: #000000; position:relative; top:-1px; line-height:100%; display:inline-block;}\r
-.resources  a, .resources  a:hover              { border:0 none;}\r
-.resources .categories ul                          { margin:0;padding:0;}\r
-.resources .categories ul li                    { float: left; list-style:none outside;}\r
-.resources .categories .title                   { margin-bottom: 0.5em; }\r
-.resources .categories ul li a                  { color: #000000;   margin-right: 22px; text-decoration: none; }\r
-.resources .categories ul li a:hover, \r
-.resources .categories ul li a.selected         { color: #000000;}\r
-.resources .categories ul li.active a                  { text-decoration: underline }\r
-.resources .categories ul li.inactive           { opacity: 0.3; }\r
-.resources .categories ul li.active             { opacity: 1; }\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
-.resources .list .resource-wrapper.hidden       { display: none; }\r
-.resources .list .resource                      { border: 1px solid #000000; height: 188px; overflow: hidden; padding: 30px; }\r
-.resources .list .resource .date                { color: #808080; margin-bottom: 3px; }\r
-.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; }\r
-.resources .list .resource .title               { line-height: 1.4em; }\r
-.resources .list .resource .category            { color: #808080; margin-top: 30px; }\r
-.resources .list .resource .category a          { color: #808080; }\r
-.resources .list .resource .download            { bottom: 0; cursor: pointer; font-size: 1.1em; margin-bottom: 3px; margin-left: -10px; position: absolute; width: 190px; }\r
-.resources .list .resource .download a          { color: #000000; display: block; padding: 5px 5px 5px 15px; text-decoration: none; }\r
-.resources .list .resource .download a:hover, \r
-.resources .list .resource .download a .hovered { color: #FF5D00;}\r
-.resources .list .resource .download a:hover .download-image, \r
-.resources .list .resource .download a .hovered .download-image { background-image: url(../images/resource_down_arrow-active.png); }\r
-.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; }\r
-.resources .list .resource .download img        { margin-right: 10px; vertical-align: middle;}\r
-.resources .list .resource:hover .description, \r
-.resources .list .resource .hover .description { display: block; top: 0; }\r
-.resources .list .resource-cat-1.resource               { border-color: #4085A5  }\r
-.resources .list .resource-cat-1.resource .title        { color: #4085A5 }\r
-.resources .list .resource-cat-1.resource .description  { background-color: #4085A5 }\r
-.resources  .filter-item a                                                             { display:inline-block; line-height:100%; }\r
-.resources  .filter-item a:hover                                               { text-decoration:underline }\r
-.resources .list .resource-cat-2.resource               { border-color: #FF6F00  }\r
-.resources .list .resource-cat-2.resource .title        { color: #FF6F00  }\r
-.resources .list .resource-cat-2.resource .description  { background-color: #FF6F00  }\r
-.resources .list .resource-cat-2.resource .description p{ line-height:130%; }\r
-\r
-table                                                                                  { width:80%; color:#B3B3B3;}\r
-table th, table td                                                             { padding:5px 5px 5px 0;  }1234\r
-/*table td                                                                             { border-top: 1px solid #DDDDDD; }*/\r
-table th                                        { color:#222; font-weight:normal;}\r
-table td.consumed                                                              { color: #9D261D; }\r
-\r
-/*.zebra-striped tbody tr:nth-child(2n+1) td, \r
-.zebra-striped tbody tr:nth-child(2n+1) th             { background-color: #F9F9F9; }*/\r
-.zebra-striped tbody tr:hover td, \r
-.zebra-striped tbody tr:hover th                               { color:#000; }\r
-\r
-.buttons-list.fixpos                                                   { position:absolute; bottom:0; right:0; }\r
-.button.back.right                                                             { right: 0; }\r
-.buttons-list .button                                                  { margin-left: 10px; }\r
-.button.back                                                                   {  z-index: 500; }\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 .next-prev                          { float:right; }\r
-.pagination .next-prev a                                               { margin-left:15px; }\r
-.pagination .nums                               { text-align:left;}\r
-.pagination .nums span                          { color:#000;}\r
-                    \r
-.two-cols .lt .clients-wrapper p                               { padding:0; }\r
-\r
-\r
-/* colors for links */\r
-.container ul.options li a                                             { display:inline-block; line-height:100%; }\r
-.container ul.options li a:hover                               { text-decoration: none; }\r
-.container ul.options li a.red                                 { color:#F24E53 }\r
-.container ul.options li a.red:hover                   { border-bottom:1px solid #F24E53; }\r
-.container ul.options li a.grey                                        { color:#F89A1C }\r
-.container ul.options li a.grey:hover                  { border-bottom:1px solid #F89A1C; }\r
-.container ul.options li a.blue                                        { color:#3582AC }\r
-.container ul.options li a.blue:hover                  { border-bottom:1px solid #3582AC; }\r
-\r
-/* homepage clouds animation */\r
-#animation                                      { width:94%; height:120px; padding:0 3%; background:url(../images/okeanos_landing.png) no-repeat; max-width:375px; }\r
-#animation div                                  { margin:0 2%; float:left; width:29%; height:100%; position:relative; }                    \r
-#animation div a                                { position:absolute; left:0; top:0; border:0 none; }\r
-#animation div a img                                                   { width:100%; }\r
-#animation p                                   { position:absolute; bottom:0; left:0; width:100%; text-align:center; }\r
-#animation p img                                { display:inline-block; width:65%; }\r
-\r
-/* Weird bug in pages that contain captcha. An extra iframe appears in chrome :S*/\r
-.container +iframe                                                             { display:none; }\r
-\r
-/* Style for im/projects */\r
-table.alt-style                                                                { color:#000; width:100%; }\r
-table.alt-style caption                                                        { font-weight:normal;  font-size:1.154em; margin-bottom:15px;}\r
-table.alt-style tr th                                                  { font-weight:normal; color:#3582AC }\r
-table.alt-style tr td                                                  { color:#222; }\r
-table.alt-style tr td:first-child,\r
-table.alt-style tr th:first-child                              { padding-left:5px; }\r
-table.alt-style tr td a                                                        { margin:0 0 0 20px; }\r
-table.alt-style tr td:first-child a                            { margin:0; }\r
-.content a.submit                                                              { margin:0; display:inline-block; margin:10px 0 ;  height:auto; min-width:100px; text-align:center;}\r
-table.alt-style tr:nth-child(2n) td                            { background:#F2F2F2 }\r
-dl.alt-style                                                                   { width:500px; }\r
-dl.alt-style dt                                                                        { width:50%; float:left; color:#3582AC; font-weight:normal;}\r
-dl.alt-style dt:nth-child(2n)                                  { background:black; }\r
-.projects                                                                              { padding-bottom:30px; position:relative; }\r
-.projects h2 span                                                              { color:#3582AC;}\r
-.projects h2 em                                                                        { float:right; }\r
-.projects h3                                                                   { font-size:1.154em; }\r
-.projects .submit-rt                                                   { margin:0; text-align:right; }\r
-.projects +.buttons-list.fixpos                                        { left:0; right:auto; }\r
-\r
-/* new faq-userguide styles */\r
-\r
-.faq .two-cols .lt                                                             { width:460px; }\r
-.faq .two-cols .rt                                                             { width:340px; text-align:center; }\r
-.lt-small .rt                                                                  { width:520px; }\r
-.lt-small .lt                                                                  { width:280px; }\r
-.unequal-dotted                                                                        { background:url(../images/double-dots-unequal.jpg) no-repeat top center; padding: 30px 0 0 ; margin-top:30px;}\r
-.unequal-dotted:first-child                                            { background:none; padding-top:0; margin-top:0; }\r
-.tirkouaz h2,\r
-.tirkouaz h2 a,\r
-.tirkouaz h3,\r
-.tirkouaz a:hover,\r
-.tirkouaz li.current a                                                 { color:#00A1B0; }\r
-.yellow h2,\r
-.yellow h2 a,\r
-.yellow h3,\r
-.yellow a:hover,\r
-.yellow li.current a                                                   { color:#F6921E; }\r
-.purple h2,\r
-.purple h2 a,\r
-.purple h3,\r
-.purple a:hover,\r
-.purple li.current a                                                   { color:#7B499C; }\r
-.blue h2,\r
-.blue h2 a,\r
-.blue h3,\r
-.blue a:hover,\r
-.blue li.current a                                                             { color:#3582AC; }\r
-.brown h2,\r
-.brown h2 a,\r
-.brown h3,\r
-.brown a:hover,\r
-.brown li.current a                                                            { color:#BC742B; }\r
-\r
-.question .content a:hover                                             { color:#F6921E }\r
-.details .extra-menu                                                   { background: url(../images/dots.jpg) repeat-x  center top ;padding-top:20px; margin-top:20px; }\r
-.details .extra-menu h3                                                        { margin-bottom:1em; font-weight:bold;}\r
-.details .faq-category h2                                              { font-size:1em; }\r
-.question .next-prev                                                   { margin:10px 0; }\r
-.question .next                                                                        { float:right; }\r
-.details img                                                                   { max-width:100%; }\r
-.question .section                                                             { margin-top:1em; }\r
-.question pre                                                                  { border:1px dashed #000; padding:5px; margin:10px 0; line-height:auto; }\r
-/*\r
-.widjets                                                                               { position:relative; }\r
-.widjets ul                                                                            { margin: 0; padding:0; }\r
-.widjets li                                                                            { width:50%; float:left; list-style:none outside; margin:30px 0; }\r
-.widjets li div                                                                        { border:1px dashed #000; padding:20px 20px 70px; width:60%; margin:0 auto; position:relative; }\r
-.widjets li div img                                                            { max-width:100%; }\r
-.widjets li .btn                                                               { text-align:center; position:absolute; bottom:0; left:0; right:0; }\r
-.widjets .widjet-x                                                             { position:absolute; right:0;top:0; font-weight:bold; font-size:1.5em; }\r
-.widjets .widjet-x:hover                                               { text-decoration:none; color:#000; }\r
-\r
- */\r
-.widjets                                                                               { position:relative; }\r
-.widjets ul                                                                            { margin: 0; padding:0; }\r
-.widjets li                                                                            { width:50%; float:left; list-style:none outside; margin:30px 0;  }\r
-.widjets li div                                                                        { background:url(../images/dots.jpg) repeat-x top ; margin:0 0 0 20px; position:relative;   padding:2em 0; }\r
-.widjets li div .wrap                                                  { background:url(../images/dots.jpg) repeat-x bottom ; }\r
-.widjets li:first-child div                                    { margin-right:20px; margin-left:0; }\r
-.widjets li div img                                                            { max-width:100%; margin:2em 0; }\r
-.widjets li div .txt                                                   { height:130px; }\r
-.widjets .widjet-x                                                             { position:absolute; right:0;top:0; font-weight:bold; font-size:1.5em; }\r
-.widjets .widjet-x:hover                                               { text-decoration:none; color:#000; }\r
-.widjets li.create h2, \r
-.widjets li.create a                                                   { color: #55B577}\r
-.widjets li.join h2, \r
-.widjets li.join a                                                             { color: #F24E53}\r
-.widjets li a                                                                  { font-size:1.154em; }\r
-.widjets .wrap p:first-child                    { height:200px;margin-bottom:2em; }\r
-\r
-/* billing styles */\r
-.alt-style .table-div                                                  { border:1px dashed #000; }\r
-.billing table.complex tr:nth-child(2n) td             { background:transparent; }\r
-.billing table.alt-style tr.zebra td                   { background:#F2F2F2; }\r
-.billing .highlight                                                            { text-align:center; padding:10px; border:1px dashed #000; font-size:1.231em; margin:0 0 2em; position:relative;}\r
-.billing .highlight em                                                 { color:#3582AC; font-style:normal; font-weight:bold; }\r
-.billing table.marginless                                              { margin-bottom:0; }\r
-.billing .sum                                                                  { background:#5A97B8; padding:5px 5px 5px 10px; color:#fff; }\r
-.billing.details .last                                                 { width:15%;}\r
-.billing.details .prelast                                              { width:10%;}\r
-.billing.list .last                                                            { width:20%; }\r
-.billing.list .prelast                                                 { width:20%; }\r
-.billing form                                                                  { margin-top:50px; }\r
-.billing .categories                                                   { margin-bottom:2em; }\r
-.billing .categories .clear                    { color: #000000; position:relative; top:-1px; line-height:100%; display:inline-block;}\r
-.billing  a, .billing  a:hover                 { border:0 none;}\r
-.billing .categories ul                            { margin:0;padding:0;}\r
-.billing .categories ul li                     { float: left; list-style:none outside;}\r
-.billing .categories .title                    { margin-bottom: 0.5em; }\r
-.billing .categories ul li a                   { color: #000000;   margin-right: 22px; text-decoration: none; }\r
-.billing .categories ul li a:hover, \r
-.billing .categories ul li a.selected          { color: #000000;}\r
-.billing .categories ul li.active a                            { text-decoration: underline }\r
-.billing .categories ul li.inactive            { opacity: 0.3; }\r
-.billing .categories ul li.active              { opacity: 1; }\r
-.billing .resource-cat-1.filter-item a,\r
-.billing .resource-cat-1.filter-item a:hover   { color:#ff6f00 }\r
-.billing .resource-cat-2.filter-item a,\r
-.billing .resource-cat-2.filter-item a:hover   { color:#4085A5 }\r
-.billing span.info                                                             { position:absolute;z-index:10; bottom:32px; right:40px; }\r
-.billing span.info em                                                  { display:block; overflow:hidden;  position:absolute; left:0; text-indent:-110px; top:0; height:21px; width:21px; background:url(../images/symbols.png) no-repeat -4px -31px;cursor:pointer; }\r
-.billing span.info:hover em                                    { background-position:-4px -3px; }\r
-.billing span.info span                                                { position:absolute; left:29px; top:-2px; width:120px; padding-left:30px; background:url(../images/black-line.jpg ) no-repeat left 12px ; min-height:50px; display:none; font-size:12px;}\r
-.billing span.info:hover span                                  { display:block; }\r
-.billing span.info.foo span                                            { padding:0; background:transparent; left:-48px; top:22px; font-size:12px;}\r
-.billing .highlight a                                                  { float:right; }\r
-.billing .highlight .popup                                             { position:absolute;right:20px; top:40px; width: 100px;  border:1px solid #000; }\r
-.billing table.alt-style tr td                                 { border-top:10px solid #fff; }\r
-.billing table.alt-style .last                                 { text-align:right; }\r
-\r
-.table_sorting tr th                                                   { cursor:pointer; }\r
-\r
-.table_sorting tr th:hover                                             { text-decoration:underline }\r
-\r
-table.alt-style tr.tr1 td,\r
-table.alt-style tr.tmore1 td                                   { background:#F2F2F2 }\r
-table.alt-style tr.tr2 td,\r
-table.alt-style tr.tmore2 td                                   { background:#fff }\r
-table.alt-style tr td.info-td                                  { padding:5px; }\r
-table.alt-style tr td.info-td div                              { padding:15px; border:1px dashed #000 }\r
\r
-\r
-.projects .details a.edit                                              { margin-left:20px;  }\r
-.projects .details .data                                               { overflow:hidden; }\r
-.projects .editable form textarea                              { width:70%; height:50px; max-width:70%; width:270px; height:120px;}\r
-\r
-\r
-/* quotas-form  */\r
-\r
-.quotas-form fieldset                                                  { background:url(../images/dots.jpg) repeat-x scroll center bottom transparent; margin-bottom:3em; padding-bottom:3em; position:relative; }\r
-.quotas-form legend                                                            { color:#55B577; font-size:1.308em; margin-bottom:3em; position:relative; }\r
-.quotas-form legend span                                               { color:#222; font-size:0.867em; }\r
-form.quotas-form legend span.info                              { position:relative; display:inline-block; top:auto; left:auto;  margin-left:10px; vertical-align:middle; margin-top:-2px;}\r
-form.quotas-form legend span.info em                   { position:static; }\r
-form.quotas-form legend span.info span                 { width:395px; }\r
-.quotas-form .with-checkbox .checkbox-widget   { margin-top:9px; } \r
-.quotas-form .with-checkbox span.info                  { top:12px; }\r
-.quotas-form .form-row.submit                                  { text-align:center; }\r
-.quotas-form input[type="submit"]                              { margin:15px 0; background-color:#B3B3B3 }\r
-.quotas-form input[type="submit"]:hover                        { background:#55B577 }\r
-.quotas-form input[type="submit"]:focus                        { border-color: #B3B3B3}\r
-.quotas-form input[type="submit"]:focus:hover  { border-color: #55B577}\r
-.quotas-form fieldset ul                                               { padding:0; margin:0 0 1em; position:relative; }\r
-.quotas-form fieldset ul li                                            { list-style:none outside none; float:left; padding:0 0 0 60px; margin:0; }\r
-.quotas-form fieldset ul li:first-child                        { padding-left:0; }\r
-.quotas-form fieldset ul li a                                  { display:block; width:82px; height:82px; overflow:hidden; }\r
-.quotas-form fieldset ul li a:hover    img                     { margin-top:-84px; }\r
-.quotas-form fieldset ul li a.selected img             { margin-top:-168px; }\r
-.quotas-form fieldset ul li a.selected:hover   { cursor:default }\r
-.quotas-form fieldset ul li a.selected:focus   { outline:0 none; }\r
-.quotas-form fieldset ul li p                                  { position:absolute; top:95px; left:0; display: none;}\r
-.quotas-form fieldset ul li:hover p                            { display:block; }\r
-.quotas-form p.msg                                                             { color:#B3B3B3; }\r
-.quotas-form a.delete                                                  { position:absolute; right:0; top:0; color:#B3B3B3; z-index:2 }\r
-.quotas-form .group                                                            { display:none; position:relative; background:url(../images/dots.jpg) repeat-x scroll center bottom; margin-bottom:2em; padding-bottom:2em;}\r
-.quotas-form .group fieldset                                   { background:transparent; margin-bottom:1em; padding-bottom:1em; }\r
-.quotas-form .group fieldset legend                            { margin-bottom:1em; padding-bottom:1em; }\r
-.quotas-form fieldset ul li.rel+li.rel                 { background:url(../images/quota-related-bg.png) no-repeat left center; }\r
-.quotas-form .double-checks label                              { font-size:1.077em; }\r
-.quotas-form .double-checks .form-row                  { float:left; margin-right:10px;}\r
-.quotas-form .double-checks .with-checkbox .checkbox-widget    { left:0; }\r
-.quotas-form .double-checks .with-checkbox input[type="text"]  { width:60px; float:left; margin:9px 15px -9px; display:none; padding:6px; }\r
-.quotas-form .double-checks .with-checkbox label{ width:auto; float:left; margin-left:35px; }\r
-.quotas-form .double-checks .with-checkbox input[type="text"].hideshow { display:block; }\r
-.quotas-form .with-checkbox+.with-checkbox             { width:196px; }\r
-.summary dl.alt-style dt                                               { color:#55B577; }\r
-.quotas-form .with-info .double-checks p               { clear:both; }\r
-.quotas-form .with-info .with-checkbox+.with-checkbox          { width:auto; }\r
-.quotas-form .with-info .double-checks                         { position:relative; margin-bottom:70px; }\r
-.quotas-form .with-info .double-checks .form-row+.form-row                                     { position:absolute; left:224px; top:40px;}\r
-.quotas-form .with-info .double-checks span.info { left:262px; }\r
+body                                                                                   { overflow-y: scroll;}
+
+.wrapper                                        { margin:0 auto; position:relative; width:820px; padding:36px 70px; }
+.container .wrapper,
+.footer .wrapper                                { border: 1px solid #808080; border-top:0 none;}
+.footer .wrapper                                                               { padding:20px 70px 25px; }
+.centered                                       { text-align:center;}
+img.left                                                               { margin:0 1em 1em 0; float:left;}
+img.right                                                              { margin:0 0 1em 1em; float:right;}
+
+/* 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 10px 0 0; width:125px;  padding:0;}
+.footer ul li                                   { padding:0; margin: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 36px; background:blue; padding:50px; color:#fff; display:none; position:relative; font-size:1.538em; text-align:center;}
+.top-msg p                                                                             { text-align:center; }
+.top-msg p.title                                   { font-size:1.3em;  }
+.top-msg p.title span                          { border-bottom:2px dotted #fff; padding:0 0 10px 0;}
+.top-msg.active                                { display:block;}
+.top-msg +.mainlogo                             { margin-top:-73px;}
+.top-msg .close                                 { position:absolute; bottom:20px; right:20px; font-size:1.3em;  border:0 none; color:#fff; text-decoration:none;}
+.top-msg .close:hover                           { color:#000;}
+.top-msg.success                               { background-color:#77C596; color: #fff}
+.top-msg.error                                 { background-color:#EF4F54; color: #fff}
+.top-msg.warning                                { background-color:#F6921E; color: #fff}
+.top-msg.info                                  { background-color:#C3C3B9; color: #fff}
+.top-msg.warning a                              { color: #3582AC}
+.top-msg.info a                                 { color: #222}
+
+/* container */
+.container .wrapper                             { padding-bottom:100px;}
+.mainlogo h1                                                                   { line-height:100%; font-size:1em; }
+.container .navigation                          { margin:20px 0 0; font-size:1.154em; height:95px;}
+.container .navigation ul                       { margin:5px 0; padding:0;}
+.container .navigation ul + ul                                 { font-size:0.933em; }
+.container .navigation ul li                    { list-style:none outside; padding:0; margin:0 1em 0 0; display:inline-block;}
+.container .navigation ul li a                  { color:#000; text-decoration:none; }
+.container .navigation ul li a:hover            { color:#F89A1C; }     
+.container .navigation ul li.active a           { color:#F89A1C; }                                     
+
+.dotted                                         { background:url(../images/double-dots.jpg) no-repeat bottom center; padding:0 0 30px; margin-bottom:30px;}
+.full-dotted                                                                   { background:url(../images/dots.jpg) repeat-x top; margin-top:20px; padding-top:20px; }
+.full-dotted:first-child                                               { background:none; padding-top:0; margin-top:0; }
+.two-cols .rt                                   { float:right; width:400px;}
+.two-cols .lt                                   { float:left; width:400px;}
+.two-cols-blog .rt                              { float:right; width:220px; margin-left:80px; padding-right:65px;}
+.two-cols-blog .lt                                 { overflow:hidden;}
+.container h2                                                                  { font-weight:normal; font-size:1.308em; margin-bottom:1em; }
+.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; }*/
+
+
+.content a                                                             { text-decoration:none; }
+.content a:hover                                                   { text-decoration:underline; }
+
+.container ul.options                           { padding:0; margin:0; font-size:1.154em;}
+.container ul.options li                        { list-style:none outside; margin:0 0 1em 0;padding:0;}
+.container ul.options li h3                                            { font-size:1em; margin-bottom:0; }
+.container ul.options li a                                     { border:0 none;}
+.container ul.options li a:hover                               { text-decoration:underline;}
+.container .extra ul.options                                   { font-size:1em; margin:0 ; padding:15px; }
+.landing h2, .landing a:hover                   { color:#01A1AE;}
+.faq h2, .faq a:hover, .faq .current a          { color:#EF4F54; border:0 none;}
+.faq .current a                                                                        { text-decoration:underline }
+.question h2                                                                   { color:#EF4F54 }
+.content .backlink                                                             { margin:1em 0; }
+.faq h3                                                                                        { color:#4085a6; margin:0;}
+.faq ul                                         { padding:0; margin:0; }
+.faq ul li                                      { padding:0; margin:0 0 8px 0; list-style:none outside none;line-height:140%;  }
+.faq ul li a                                    { color:#222222; border:0 none; } 
+.faq .faq-category                                                             { margin: 0 0 1.5em;}
+.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                                { max-width:100%; margin-bottom:1em;}
+.posts ul li p.info                             { padding-bottom:10px; margin:20px 0; font-size:0.769em; color:#808080; background:url(../images/dots.jpg) repeat-x bottom ;}
+.article p.info                                                                { margin-top:20px; padding-top:10px; font-size:0.769em; color:#808080; }
+.article h2, .posts h2                          { color:#ef4f53; }
+.posts h2 a, .posts h2 a:hover                  { border:0 none;color:#ef4f53;}
+.posts p.date, .article p.date                  { margin:0; font-size:1.077em; color:#3582AC; }
+p.info a                                        { color:#808080; border-bottom:0 none; }
+p.info a:hover                                  { color:#000; border-bottom:0 none;}
+.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:-32px;}
+.pithos h2,                       
+.pithos .extra .options li h3                   { color:#BC742B; }
+.cyclades h2,                 
+.cyclades .extra .options li h3                 { color:#00A1B0; }
+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:#3582AC; color:#000; text-decoration: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;}
+.container .bottom-bordered                     { border-bottom:1px dashed #000000;margin-bottom:20px }
+.container .lt-div                              { width:234px; float:left; }
+.container .overflow-hidden                     { overflow:hidden;}
+.documentation .wrap                                                   { width:500px; }
+
+
+/* resources*/
+.resources .categories .clear                  { color: #000000; position:relative; top:-1px; line-height:100%; display:inline-block;}
+.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.active a                  { text-decoration: underline }
+.resources .categories ul li.inactive           { opacity: 0.3; }
+.resources .categories ul li.active             { opacity: 1; }
+.resources .list                                { line-height: 1em; margin-top: 60px; position: relative; margin-right:-35px; }
+.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  .filter-item a                                                             { display:inline-block; line-height:100%; }
+.resources  .filter-item a:hover                                               { text-decoration:underline }
+.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 .list .resource-cat-2.resource .description p{ line-height:130%; }
+
+table                                                                                  { width:80%; color:#B3B3B3;}
+table th, table td                                                             { padding:5px 5px 5px 0;  }1234
+/*table td                                                                             { border-top: 1px solid #DDDDDD; }*/
+table th                                        { color:#222; font-weight:normal;}
+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                               { color:#000; }
+
+.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; }
+/* Styles for blue button-like back link
+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;}
+a.button:hover                                                                 { background-color: #F89A1C; border:0 none; color:#fff;}*/
+
+/*pagination*/
+.pagination .next-prev                          { float:right; }
+.pagination .next-prev a                                               { margin-left:15px; }
+.pagination .nums                               { text-align:left;}
+.pagination .nums span                          { color:#000;}
+                    
+.two-cols .lt .clients-wrapper p                               { padding:0; }
+
+
+/* colors for links */
+.container ul.options li a                                             { display:inline-block; line-height:100%; }
+.container ul.options li a:hover                               { text-decoration: none; }
+.container ul.options li a.red                                 { color:#F24E53 }
+.container ul.options li a.red:hover                   { border-bottom:1px solid #F24E53; }
+.container ul.options li a.grey                                        { color:#F89A1C }
+.container ul.options li a.grey:hover                  { border-bottom:1px solid #F89A1C; }
+.container ul.options li a.blue                                        { color:#3582AC }
+.container ul.options li a.blue:hover                  { border-bottom:1px solid #3582AC; }
+
+/* homepage clouds animation */
+#animation                                      { width:94%; height:120px; padding:0 3%; background:url(../images/okeanos_landing.png) no-repeat; max-width:375px; }
+#animation div                                  { margin:0 2%; float:left; width:29%; height:100%; position:relative; }                    
+#animation div a                                { position:absolute; left:0; top:0; border:0 none; }
+#animation div a img                                                   { width:100%; }
+#animation p                                   { position:absolute; bottom:0; left:0; width:100%; text-align:center; }
+#animation p img                                { display:inline-block; width:65%; }
+
+/* Weird bug in pages that contain captcha. An extra iframe appears in chrome :S*/
+.container +iframe                                                             { display:none; }
+
+/* Style for im/projects */
+table.alt-style                                                                { color:#000; width:100%; }
+table.alt-style caption                                                        { font-weight:normal;  font-size:1.154em; margin-bottom:15px;}
+table.alt-style tr th                                                  { font-weight:normal; color:#3582AC }
+table.alt-style tr td                                                  { color:#222; }
+table.alt-style tr td:first-child,
+table.alt-style tr th:first-child                              { padding-left:5px; }
+table.alt-style tr td a                                                        { margin:0 0 0 20px; }
+table.alt-style tr td:first-child a                            { margin:0; }
+.content a.submit                                                              { margin:0; display:inline-block; margin:10px 0 ;  height:auto; min-width:100px; text-align:center;}
+table.alt-style tr:nth-child(2n) td                            { background:#F2F2F2 }
+dl.alt-style                                                                   { width:500px; }
+dl.alt-style dt                                                                        { width:50%; float:left; color:#3582AC; font-weight:normal;}
+dl.alt-style dt:nth-child(2n)                                  { background:black; }
+.projects                                                                              { padding-bottom:30px; position:relative; }
+.projects h2 span                                                              { color:#3582AC;}
+.projects h2 em                                                                        { float:right; }
+.projects h3                                                                   { font-size:1.154em; }
+.projects .submit-rt                                                   { margin:0; text-align:right; }
+.projects +.buttons-list.fixpos                                        { left:0; right:auto; }
+
+/* new faq-userguide styles */
+
+.faq .two-cols .lt                                                             { width:460px; }
+.faq .two-cols .rt                                                             { width:340px; text-align:center; }
+.lt-small .rt                                                                  { width:520px; }
+.lt-small .lt                                                                  { width:280px; }
+.unequal-dotted                                                                        { background:url(../images/double-dots-unequal.jpg) no-repeat top center; padding: 30px 0 0 ; margin-top:30px;}
+.unequal-dotted:first-child                                            { background:none; padding-top:0; margin-top:0; }
+.tirkouaz h2,
+.tirkouaz h2 a,
+.tirkouaz h3,
+.tirkouaz a:hover,
+.tirkouaz li.current a                                                 { color:#00A1B0; }
+.yellow h2,
+.yellow h2 a,
+.yellow h3,
+.yellow a:hover,
+.yellow li.current a                                                   { color:#F6921E; }
+.purple h2,
+.purple h2 a,
+.purple h3,
+.purple a:hover,
+.purple li.current a                                                   { color:#7B499C; }
+.blue h2,
+.blue h2 a,
+.blue h3,
+.blue a:hover,
+.blue li.current a                                                             { color:#3582AC; }
+.brown h2,
+.brown h2 a,
+.brown h3,
+.brown a:hover,
+.brown li.current a                                                            { color:#BC742B; }
+
+.question .content a:hover                                             { color:#F6921E }
+.details .extra-menu                                                   { background: url(../images/dots.jpg) repeat-x  center top ;padding-top:20px; margin-top:20px; }
+.details .extra-menu h3                                                        { margin-bottom:1em; font-weight:bold;}
+.details .faq-category h2                                              { font-size:1em; }
+.question .next-prev                                                   { margin:10px 0; }
+.question .next                                                                        { float:right; }
+.details img                                                                   { max-width:100%; }
+.question .section                                                             { margin-top:1em; }
+.question pre                                                                  { border:1px dashed #000; padding:5px; margin:10px 0; line-height:auto; }
+/*
+.widjets                                                                               { position:relative; }
+.widjets ul                                                                            { margin: 0; padding:0; }
+.widjets li                                                                            { width:50%; float:left; list-style:none outside; margin:30px 0; }
+.widjets li div                                                                        { border:1px dashed #000; padding:20px 20px 70px; width:60%; margin:0 auto; position:relative; }
+.widjets li div img                                                            { max-width:100%; }
+.widjets li .btn                                                               { text-align:center; position:absolute; bottom:0; left:0; right:0; }
+.widjets .widjet-x                                                             { position:absolute; right:0;top:0; font-weight:bold; font-size:1.5em; }
+.widjets .widjet-x:hover                                               { text-decoration:none; color:#000; }
+
+ */
+.widjets                                                                               { position:relative; }
+.widjets ul                                                                            { margin: 0; padding:0; }
+.widjets li                                                                            { width:50%; float:left; list-style:none outside; margin:30px 0;  }
+.widjets li div                                                                        { background:url(../images/dots.jpg) repeat-x top ; margin:0 0 0 20px; position:relative;   padding:2em 0; }
+.widjets li div .wrap                                                  { background:url(../images/dots.jpg) repeat-x bottom ; }
+.widjets li:first-child div                                    { margin-right:20px; margin-left:0; }
+.widjets li div img                                                            { max-width:100%; margin:2em 0; }
+.widjets .widjet-x                                                             { position:absolute; right:0;top:0; font-weight:bold; font-size:1.5em; }
+.widjets .widjet-x:hover                                               { text-decoration:none; color:#000; }
+.widjets li.create h2, 
+.widjets li.create a                                                   { color: #55B577}
+.widjets li.join h2, 
+.widjets li.join a                                                             { color: #F24E53}
+.widjets li a                                                                  { font-size:1.154em; }
+.widjets .wrap p:first-child                    { height:200px;margin-bottom:2em; }
+
+/* billing styles */
+.alt-style .table-div                                                  { border:1px dashed #000; }
+.billing table.complex tr:nth-child(2n) td             { background:transparent; }
+.billing table.alt-style tr.zebra td                   { background:#F2F2F2; }
+.billing .highlight                                                            { text-align:center; padding:10px; border:1px dashed #000; font-size:1.231em; margin:0 0 2em; position:relative;}
+.billing .highlight em                                                 { color:#3582AC; font-style:normal; font-weight:bold; }
+.billing table.marginless                                              { margin-bottom:0; }
+.billing .sum                                                                  { background:#5A97B8; padding:5px 5px 5px 10px; color:#fff; }
+.billing.details .last                                                 { width:15%;}
+.billing.details .prelast                                              { width:10%;}
+.billing.list .last                                                            { width:20%; }
+.billing.list .prelast                                                 { width:20%; }
+.billing form                                                                  { margin-top:50px; }
+.billing .categories                                                   { margin-bottom:2em; }
+.billing .categories .clear                    { color: #000000; position:relative; top:-1px; line-height:100%; display:inline-block;}
+.billing  a, .billing  a:hover                 { border:0 none;}
+.billing .categories ul                            { margin:0;padding:0;}
+.billing .categories ul li                     { float: left; list-style:none outside;}
+.billing .categories .title                    { margin-bottom: 0.5em; }
+.billing .categories ul li a                   { color: #000000;   margin-right: 22px; text-decoration: none; }
+.billing .categories ul li a:hover, 
+.billing .categories ul li a.selected          { color: #000000;}
+.billing .categories ul li.active a                            { text-decoration: underline }
+.billing .categories ul li.inactive            { opacity: 0.3; }
+.billing .categories ul li.active              { opacity: 1; }
+.billing .resource-cat-1.filter-item a,
+.billing .resource-cat-1.filter-item a:hover   { color:#ff6f00 }
+.billing .resource-cat-2.filter-item a,
+.billing .resource-cat-2.filter-item a:hover   { color:#4085A5 }
+.billing span.info                                                             { position:absolute;z-index:10; bottom:32px; right:40px; }
+.billing span.info em                                                  { display:block; overflow:hidden;  position:absolute; left:0; text-indent:-110px; top:0; height:21px; width:21px; background:url(../images/symbols.png) no-repeat -4px -31px;cursor:pointer; }
+.billing span.info:hover em                                    { background-position:-4px -3px; }
+.billing span.info span                                                { position:absolute; left:29px; top:-2px; width:120px; padding-left:30px; background:url(../images/black-line.jpg ) no-repeat left 12px ; min-height:50px; display:none; font-size:12px;}
+.billing span.info:hover span                                  { display:block; }
+.billing span.info.foo span                                            { padding:0; background:transparent; left:-48px; top:22px; font-size:12px;}
+.billing .highlight a                                                  { float:right; }
+.billing .highlight .popup                                             { position:absolute;right:20px; top:40px; width: 100px;  border:1px solid #000; }
+.billing table.alt-style tr td                                 { border-top:10px solid #fff; }
+.billing table.alt-style .last                                 { text-align:right; }
+
+.table_sorting tr th                                                   { cursor:pointer; }
+
+.table_sorting tr th:hover                                             { text-decoration:underline }
+
+table.alt-style tr.tr1 td,
+table.alt-style tr.tmore1 td                                   { background:#F2F2F2 }
+table.alt-style tr.tr2 td,
+table.alt-style tr.tmore2 td                                   { background:#fff }
+table.alt-style tr td.info-td                                  { padding:5px; }
+table.alt-style tr td.info-td div                              { padding:15px; border:1px dashed #000 }
+
+.projects .details a.edit                                              { margin-left:20px;  }
+.projects .details .data                                               { overflow:hidden; }
+.projects .editable form textarea                              { width:70%; height:50px; max-width:70%; width:270px; height:120px;}
+
+
+/* quotas-form  */
+
+.quotas-form fieldset                                                  { background:url(../images/dots.jpg) repeat-x scroll center bottom transparent; margin-bottom:3em; padding-bottom:3em; position:relative; }
+.quotas-form legend                                                            { color:#55B577; font-size:1.308em; margin-bottom:3em; position:relative; }
+.quotas-form legend span                                               { color:#222; font-size:0.867em; }
+form.quotas-form legend span.info                              { position:relative; display:inline-block; top:auto; left:auto;  margin-left:10px; vertical-align:middle; margin-top:-2px;}
+form.quotas-form legend span.info em                   { position:static; }
+form.quotas-form legend span.info span                 { width:395px; }
+.quotas-form .with-checkbox .checkbox-widget   { margin-top:9px; } 
+.quotas-form .with-checkbox span.info                  { top:12px; }
+.quotas-form .form-row.submit                                  { text-align:center; }
+.quotas-form input[type="submit"]                              { margin:15px 0; background-color:#B3B3B3 }
+.quotas-form input[type="submit"]:hover                        { background:#55B577 }
+.quotas-form input[type="submit"]:focus                        { border-color: #B3B3B3}
+.quotas-form input[type="submit"]:focus:hover  { border-color: #55B577}
+.quotas-form fieldset ul                                               { padding:0; margin:0 0 1em; position:relative; }
+.quotas-form fieldset ul li                                            { list-style:none outside none; float:left; padding:0 0 0 60px; margin:0; }
+.quotas-form fieldset ul li:first-child                        { padding-left:0; }
+.quotas-form fieldset ul li a                                  { display:block; width:82px; height:82px; overflow:hidden; }
+.quotas-form fieldset ul li a:hover    img                     { margin-top:-84px; }
+.quotas-form fieldset ul li a.selected img             { margin-top:-168px; }
+.quotas-form fieldset ul li a.selected:hover   { cursor:default }
+.quotas-form fieldset ul li a.selected:focus   { outline:0 none; }
+.quotas-form fieldset ul li p                                  { position:absolute; top:95px; left:0; display: none;}
+.quotas-form fieldset ul li:hover p                            { display:block; }
+.quotas-form p.msg                                                             { color:#B3B3B3; }
+.quotas-form a.delete                                                  { position:absolute; right:0; top:0; color:#B3B3B3; z-index:2 }
+.quotas-form .group                                                            { display:none; position:relative; background:url(../images/dots.jpg) repeat-x scroll center bottom; margin-bottom:2em; padding-bottom:2em;}
+.quotas-form .group fieldset                                   { background:transparent; margin-bottom:1em; padding-bottom:1em; }
+.quotas-form .group fieldset legend                            { margin-bottom:1em; padding-bottom:1em; }
+.quotas-form fieldset ul li.rel+li.rel                 { background:url(../images/quota-related-bg.png) no-repeat left center; }
+.quotas-form .double-checks label                              { font-size:1.077em; }
+.quotas-form .double-checks .form-row                  { float:left; margin-right:10px;}
+.quotas-form .double-checks .with-checkbox .checkbox-widget    { left:0; }
+.quotas-form .double-checks .with-checkbox input[type="text"]  { width:60px; float:left; margin:9px 15px -9px; display:none; padding:6px; }
+.quotas-form .double-checks .with-checkbox label{ width:auto; float:left; margin-left:35px; }
+.quotas-form .double-checks .with-checkbox input[type="text"].hideshow { display:block; }
+.quotas-form .with-checkbox+.with-checkbox             { width:196px; }
+.summary dl.alt-style dt                                               { color:#55B577; }
+.quotas-form .with-info .double-checks p               { clear:both; }
+.quotas-form .with-info .with-checkbox+.with-checkbox          { width:auto; }
+.quotas-form .with-info .double-checks                         { position:relative; margin-bottom:70px; }
+.quotas-form .with-info .double-checks .form-row+.form-row                                     { position:absolute; left:224px; top:40px;}
+.quotas-form .with-info .double-checks span.info { left:262px; }
 .quotas-form .with-info .with-checkbox                 { margin-bottom:12px; }  
-.quotas-form .quota input[type="text"]                 { width:150px;}\r
-.quotas-form .quota .error-msg                                         { display:none; color:red; font-size:0.8em; margin:0; margin-left:224px; margin-bottom:5px; padding:5px; }\r
-.quotas-form .quota .with-errors .error-msg            { display:block;}        \r
-::-webkit-input-placeholder                                    { color: #D4D4D4; font-style:italic; }\r
-:-moz-placeholder                                                              { color: #D4D4D4;font-style:italic; }\r
-\r
-/* stats */\r
-.stats ul                                                                              { margin:0; padding:0; list-style:none outside none; }\r
-.stats ul li                                                                   { margin:0 0 1em 0; padding:0 0 1em 0; list-style:none outside none; background:url(../images/stats-line.jpg) repeat-x left bottom}\r
-.stats .bar                                                                            { padding: 0; text-align:center;  float:left; width:200px;}\r
-.stats .bar div                                                                        { width:340px; height:30px; border:1px solid #000; margin-top:20px; overflow:hidden;}\r
-.stats .bar span                                                               { text-align:right; display:block; height:100%; color:#222;  line-height:30px; font-size:1.231em; text-indent:10px;}\r
-.stats .red .bar span                                                  { background:#ef4f54; }\r
-.stats .yellow .bar span                                               { background:#f6921e; }\r
-.stats .green .bar span                                                        { background:#55b577; }\r
-.stats .img-wrap                                                               { float:left; width:100px; background:url(../images/statistics_icons.png) no-repeat center center; padding:30px 0; }\r
-.stats .info                                                                   { margin:0 25px ; width:320px; float:left;  }\r
-.stats .info p                                                                 { color:#999; margin:0; }\r
-.stats .info h3                                                                        { font-size:1.231em; color:#222222 }\r
-.stats .vm .img-wrap                                                   { background-image:url(../images/vm-stats.png) }\r
-.stats .ram .img-wrap                                                  { background-image:url(../images/ram-stats.png) }\r
-.stats .cpu .img-wrap                                                  { background-image:url(../images/cpu-stats.png) }\r
-.stats .network .img-wrap                                              { background-image:url(../images/network-stats.png) }\r
-.stats .disksize .img-wrap                                             { background-image:url(../images/disk-stats.png) }\r
-.stats .disk .img-wrap                                                 { background-image:url(../images/disk-stats.png) }\r
-.stats .diskspace .img-wrap                                            { background-image:url(../images/storage-stats.png) }\r
-.stats .bandwidth .img-wrap                                            { background-image:url(../images/bandwidth-stats.png) }\r
-\r
-.stats .red .img-wrap                                                  { background-position: 15px 7px; }\r
-.stats .yellow .img-wrap                                               { background-position: -124px 7px; }\r
-.stats .green .img-wrap                                                        { background-position: -263px 7px; }\r
-.projects .editable form textarea                              { width:70%; height:50px; max-width:70%; width:270px; height:120px;}\r
-\r
-/* temp style to hide extra menu for groups */\r
-.navigation ul+ul                                                              { display:none; }\r
-\r
-table .msg-wrap                                                                        { position:relative; }\r
-table .msg-wrap .dialog                                                        { position:absolute; border:1px dashed #ccc;  padding:15px; width:200px; bottom:30px; left:0; background:#fff; display:none; }\r
-table .msg-wrap .dialog .submit                                        { min-width:30px; padding:5px 22px; }\r
-table .msg-wrap .dialog .no.submit                             { float:right; }\r
-table.alt-style .centered                                              { text-align:center; }\r
-table.alt-style form.link-like                                 { float:none }\r
-form.quotas-form span.error-msg span                   { display:block; color:red; }\r
-form.quotas-form span.error-msg em,\r
-form.quotas-form span.error-msg:hover em               { background-position:-58px -3px; }\r
-.two-cols-links                                                                        { margin:5em 0; }\r
-.two-cols-links p                                                              { width:auto; overflow:hidden; }\r
-.two-cols-links a                                                              { color:grey; display:block; margin-bottom:10px;}\r
-.two-cols-links a:hover                                                        { color:#F89A1C }\r
-.two-cols-links p:first-child                                  { width:224px; float:left; overflow:auto }\r
-.two-cols-links p:first-child a                                        { color:#222; }\r
-.two-cols-links p:first-child a:hover                  { color:#F89A1C }\r
-\r
-.summary .quotas-form legend                                   { margin-bottom:1em; }\r
-.projects  p.restricted                                                        { width:524px; }\r
+.quotas-form .quota input[type="text"]                 { width:150px;}
+.quotas-form .quota .error-msg                                         { display:none; color:red; font-size:0.8em; margin:0; margin-left:224px; margin-bottom:5px; padding:5px; }
+.quotas-form .quota .with-errors .error-msg            { display:block;}        
+::-webkit-input-placeholder                                    { color: #D4D4D4; font-style:italic; }
+:-moz-placeholder                                                              { color: #D4D4D4;font-style:italic; }
+
+/* stats */
+.stats ul                                                                              { margin:0; padding:0; list-style:none outside none; }
+.stats ul li                                                                   { margin:0 0 1em 0; padding:0 0 1em 0; list-style:none outside none; background:url(../images/stats-line.jpg) repeat-x left bottom}
+.stats .bar                                                                            { padding: 0; text-align:center;  float:left; width:200px;}
+.stats .bar div                                                                        { width:340px; height:30px; border:1px solid #000; margin-top:20px; overflow:hidden;}
+.stats .bar span                                                               { text-align:right; display:block; height:100%; color:#222;  line-height:30px; font-size:1.231em; text-indent:10px;}
+.stats .red .bar span                                                  { background:#ef4f54; }
+.stats .yellow .bar span                                               { background:#f6921e; }
+.stats .green .bar span                                                        { background:#55b577; }
+.stats .img-wrap                                                               { float:left; width:100px; background:url(../images/statistics_icons.png) no-repeat center center; padding:30px 0; }
+.stats .info                                                                   { margin:0 25px ; width:320px; float:left;  }
+.stats .info p                                                                 { color:#999; margin:0; }
+.stats .info h3                                                                        { font-size:1.231em; color:#222222 }
+.stats .vm .img-wrap                                                   { background-image:url(../images/vm-stats.png) }
+.stats .ram .img-wrap                                                  { background-image:url(../images/ram-stats.png) }
+.stats .cpu .img-wrap                                                  { background-image:url(../images/cpu-stats.png) }
+.stats .network .img-wrap                                              { background-image:url(../images/network-stats.png) }
+.stats .disksize .img-wrap                                             { background-image:url(../images/disk-stats.png) }
+.stats .disk .img-wrap                                                 { background-image:url(../images/disk-stats.png) }
+.stats .diskspace .img-wrap                                            { background-image:url(../images/storage-stats.png) }
+.stats .bandwidth .img-wrap                                            { background-image:url(../images/bandwidth-stats.png) }
+
+.stats .red .img-wrap                                                  { background-position: 15px 7px; }
+.stats .yellow .img-wrap                                               { background-position: -124px 7px; }
+.stats .green .img-wrap                                                        { background-position: -263px 7px; }
+.projects .editable form textarea                              { width:70%; height:50px; max-width:70%; width:270px; height:120px;}
+
+/* temp style to hide extra menu for groups */
+.navigation ul+ul                                                              { display:none; }
+
+table .msg-wrap                                                                        { position:relative; }
+table .msg-wrap .dialog                                                        { position:absolute; border:1px dashed #ccc;  padding:15px; width:200px; bottom:30px; left:0; background:#fff; display:none; }
+table .msg-wrap .dialog .submit                                        { min-width:30px; padding:5px 22px; }
+table .msg-wrap .dialog .no.submit                             { float:right; }
+table.alt-style .centered                                              { text-align:center; }
+table.alt-style form.link-like                                 { float:none }
+form.quotas-form span.error-msg span                   { display:block; color:red; }
+form.quotas-form span.error-msg em,
+form.quotas-form span.error-msg:hover em               { background-position:-58px -3px; }
+.two-cols-links                                                                        { margin:5em 0; }
+.two-cols-links p                                                              { width:auto; overflow:hidden; }
+.two-cols-links a                                                              { color:grey; display:block; margin-bottom:10px;}
+.two-cols-links a:hover                                                        { color:#F89A1C }
+.two-cols-links p:first-child                                  { width:224px; float:left; overflow:auto }
+.two-cols-links p:first-child a                                        { color:#222; }
+.two-cols-links p:first-child a:hover                  { color:#F89A1C }
+
+.summary .quotas-form legend                                   { margin-bottom:1em; }
+.projects  p.restricted                                                        { width:524px; }
+.hidden-submit .form-row.submit                                        { display:none; }
+.how-it-works                                                                  { position:relative; }
+.content .how-it-works a.submit                                        { position:absolute; right:83px; bottom:50px;  background-color:#B3B3B3 }
+.content .how-it-works a.submit:hover                  { background:#55B577 }
+.content .how-it-works a.submit:focus                  { border-color: #B3B3B3}
+.content .how-it-works a.submit:focus:hover            { border-color: #55B577}
\ No newline at end of file
diff --git a/snf-astakos-app/astakos/im/static/im/images/how_it_works.png b/snf-astakos-app/astakos/im/static/im/images/how_it_works.png
new file mode 100644 (file)
index 0000000..963b9ef
Binary files /dev/null and b/snf-astakos-app/astakos/im/static/im/images/how_it_works.png differ
index b18fbb4..bba5607 100644 (file)
@@ -157,8 +157,8 @@ $(document).ready(function() {
    \r
     \r
     \r
-    //if ($('.widjets'.length > 0)) {\r
-               ///$('.widjets li div').equalHeights();\r
+    ///if ($('.widjets'.length > 0)) {\r
+               ///$('.widjets li div .txt').equalHeights();\r
        ///}\r
     \r
     $(function() {\r
@@ -232,6 +232,13 @@ $(document).ready(function() {
                $(this).hide();\r
        });\r
        \r
+       $('.editable .form-row').each(function() {\r
+                       if ( $(this).hasClass('with-errors') ){\r
+                               $('.editable').show();\r
+                               $('.projects .details a.edit, .projects .details .data').hide();\r
+                               \r
+                       }\r
+               });\r
        \r
        $('.widjet-x').click(function(e){\r
                e.preventDefault();\r
@@ -277,14 +284,15 @@ $(document).ready(function() {
                $(this).parents('.dialog').siblings('form').submit();\r
        })\r
     \r
+    $('.hidden-submit input[readonly!="True"]').focus(function () {\r
+         $('.hidden-submit .form-row.submit').show(500);\r
+    });\r
     \r
 });\r
        \r
 $(window).resize(function() {\r
     \r
    setContainerMinHeight('.container .wrapper');\r
-   ///if ($('.widjets').length > 0) {\r
-               //$('.widjets  li div').equalHeights();\r
-       //}\r
+    \r
 \r
 });
\ No newline at end of file
index 86799ea..34c5925 100644 (file)
@@ -29,7 +29,7 @@
                </h3>
                
                <div class="data">
-                       <p class="restricted">{{ object.desc }}</p>
+                       <p class="restricted">{{ object.desc|safe }}</p>
                        <dl class="alt-style">
                                <dt>Homepage url</dt>
                                <dd>
         </form>
     </div>
     {% endif %}
+    <div class="full-dotted">
+       <p>
+               <a href="{% url group_all %}">back to All Projects &gt;</a></li>
+       </p>
+        <p>
+               <a href="{% url group_list %}">back to My Projects &gt;</a>
+        </p>
+        </ul>
+    </div>
      
     
 </div>
index 9b5ed23..3afd5f0 100644 (file)
@@ -5,7 +5,7 @@
 {% block page.body %}
 <div class="maincol {% block innerpage.class %}{% endblock %}">
     <div class="projects">
-           <h2>PROJECTS </h2>
+           <h2>PROJECTS</h2>
            {% if form %}
                    <p>Search for existing Projects and join the ones you like. Please search by Project name. </p>
                    <form action="{% url group_search %}" method="post" class="withlabels signup submit-inline">{% csrf_token %}
                    </form>
                   <-->
            {% else %}
-    
-               <p>~okeanos gives the opportunity to Greek Academic or Research Organizations/Institutions/Faculty to run their own projects remotely on virtual infrastructure. Simple, fast and with minimal to no cost at all.
-</p>
+       <div class="two-cols clearfix">
+                       <div class="rt">
+                                &nbsp;
+                       </div>
+                       <div class="lt">
+                                <p>~okeanos gives the opportunity to Greek Academic or Research Organizations/Institutions/Faculty to run their own projects remotely on virtual infrastructure. Simple, fast and with minimal to no cost at all.</p>
+                                <p><a href="{% url how_it_works %}" style="font-size:1.154em;">How it works ></a></p>
+                       </div>
+               </div>
+               
                
                <div class="widjets"> 
                        <!--<a href="#" class="widjet-x" title="remove boxes">X</a>-->
@@ -33,8 +40,8 @@
                                <li class="create">
                                        <div>
                                                <div class="wrap">
-                                                       <p><a href="{% url group_add 'course' %}"><img alt="THINK ABOUT IT" src="/static/im/images/create.png"></a></p>
-                                                       <p class="txt">Create a new Project in seconds. Specify how many members it will have, which and how many virtual resources it will provide to its members. Describe its purpose. Submit your request and if accepted, you and your colleagues are ready to deploy! </p>
+                                                       <p class="centered"><a href="{% url group_add 'course' %}"><img alt="THINK ABOUT IT" src="/static/im/images/create.png"></a></p>
+                                                       <p class="txt">Create a new Project in seconds. Specify how many members it will have, which and how many virtual resources it will provide to its members. Describe its purpose. Submit your request and if accepted, you and your colleagues are ready to deploy! <br><br></p>
                                                        <p><a href="{% url group_add 'default' %}">create a project ></a></p>
                                                        <!--<p class="btn"><a href="{% url group_create_list %}" class="submit">CREATE</a></p>-->
                                                </div>
@@ -43,7 +50,7 @@
                                <li class="join">
                                        <div>
                                                <div class="wrap">
-                                                       <p><a href="{% url group_all %}"><img alt="THINK ABOUT IT" src="/static/im/images/join.png"></a></p>
+                                                       <p class="centered"><a href="{% url group_all %}"><img alt="THINK ABOUT IT" src="/static/im/images/join.png"></a></p>
                                                        <p class="txt">Become a member of an existing Project and instantly gain access to the resources it has to offer you. Search for open Projects and join for free. Contact the closed Projects administrators, if you think they will accept you. In two words: try to Join now. </p>
                                                        
                                                        <p><a href="{% url group_all %}">join a project ></a></p>
diff --git a/snf-astakos-app/astakos/im/templates/im/how_it_works.html b/snf-astakos-app/astakos/im/templates/im/how_it_works.html
new file mode 100644 (file)
index 0000000..828503a
--- /dev/null
@@ -0,0 +1,12 @@
+{% extends "im/account_base.html" %}
+
+{% load filters %}
+
+{% block page.body %}
+
+       <h2>HOW IT WORKS</h2>
+       <div class="centered how-it-works">
+               <img src="/static/im/images/how_it_works.png" alt="how it all works">
+               <a href="{% url group_list %}" class="submit">VISIT GROUPS NOW</a>
+       </div>
+{% endblock %}
index 416f9c7..7e84709 100644 (file)
@@ -2,7 +2,7 @@
 
 {% block body %}
 
-<form action={%url edit_profile %} method="post" class="withlabels">{% csrf_token %}
+<form action={%url edit_profile %} method="post" class="withlabels hidden-submit">{% csrf_token %}
     
     {% with profile_form as form %}
     {% include "im/form_render.html" %}
index 0f2f0e6..cddf21a 100644 (file)
@@ -62,7 +62,8 @@ urlpatterns = patterns('astakos.im.views',
     url(r'^group/(?P<group_id>\d+)/leave/?$', 'group_leave', {}, name='group_leave'),
     url(r'^group/(?P<group_id>\d+)/(?P<user_id>\d+)/approve/?$', 'approve_member', {}, name='approve_member'),
     url(r'^group/(?P<group_id>\d+)/(?P<user_id>\d+)/disapprove/?$', 'disapprove_member', {}, name='disapprove_member'),
-    url(r'^group/create/?$', 'group_create_list', {}, name='group_create_list')
+    url(r'^group/create/?$', 'group_create_list', {}, name='group_create_list'),
+    url(r'^group/how_it_works/?$', 'how_it_works', {}, name='how_it_works')
 )
 
 
index 9b7821b..4ac29e0 100644 (file)
@@ -1364,3 +1364,9 @@ def timeline(request):
                            timeline_header=timeline_header,
                            timeline_body=timeline_body)
     return data
+
+
+def how_it_works(request):
+    return render_response(
+        template='im/how_it_works.html',
+        context_instance=get_context(request),)
\ No newline at end of file