Animation clouds

diff --git a/cloudcms/static/cloudcms/css/modules.css b/cloudcms/static/cloudcms/css/modules.css
index 8a21320..0702285 100644 (file)
--- a/cloudcms/static/cloudcms/css/modules.css
+++ b/cloudcms/static/cloudcms/css/modules.css
@@ -49,10 +49,12 @@ img.right                                                           { margin:0 0 1em 1em; float:right;}
 .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
-.container ul.options                           { font-size:1.231em; padding:0; margin:0;}\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:30px 0 0 ; padding:0 15px; }\r
 .landing h2, .landing a:hover                   { color:#01A1AE;}\r
 .faq h2, .faq a:hover, .faq .current a          { color:#EF4F54; border:0 none;}\r
 .content .question h2                                                  { color:#4085A6 }\r
@@ -89,9 +91,9 @@ p.info a:hover                                  { color:#000; border-bottom:0 no
 .bg-wrap .extra .hide-extra:hover img           { margin-top:-16px;}\r
 .cyclades .bg-wrap .extra .hide-extra:hover img { margin-top:-32px;}\r
 .pithos h2, .pithos a:hover,                     \r
-.pithos .extra .options li                      { color:#F89A1C; }\r
+.pithos .extra .options li h3                     { color:#F89A1C; }\r
 .cyclades h2, .cyclades a:hover,                     \r
-.cyclades .extra .options li                    { color:#4085A6; }\r
+.cyclades .extra .options li h3                   { color:#4085A6; }\r
 .cyclades a                                                                { border-bottom:1px solid #4085A6; }\r
 .cyclades a:hover                                                          { border-bottom:1px solid #4085A6; }\r
 a.btn_01                                        { display:block; text-align:center; background:#F6921E; color:#000; padding:10px; text-decoration:none; border:0 none;}\r
@@ -198,4 +200,12 @@ a.button:hover                                                                     { background-color: #F89A1C; border:0 none; color:#fff;}
 .container ul.options li a.grey                                        { color:#aaa }\r
 .container ul.options li a.grey:hover                  { border-bottom:1px solid #aaa; }\r
 .container ul.options li a.blue                                        { color:#00A2B1 }\r
-.container ul.options li a.blue:hover                  { border-bottom:1px solid #00A2B1; }
\ No newline at end of file
+.container ul.options li a.blue:hover                  { border-bottom:1px solid #00A2B1; }\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%; }
\ No newline at end of file

diff --git a/cloudcms/static/cloudcms/images/cloud_01.png b/cloudcms/static/cloudcms/images/cloud_01.png
new file mode 100644 (file)
index 0000000..f877ad2
Binary files /dev/null and b/cloudcms/static/cloudcms/images/cloud_01.png differ

diff --git a/cloudcms/static/cloudcms/images/cloud_02.png b/cloudcms/static/cloudcms/images/cloud_02.png
new file mode 100644 (file)
index 0000000..97848d9
Binary files /dev/null and b/cloudcms/static/cloudcms/images/cloud_02.png differ

diff --git a/cloudcms/static/cloudcms/images/cloud_03.png b/cloudcms/static/cloudcms/images/cloud_03.png
new file mode 100644 (file)
index 0000000..704bc25
Binary files /dev/null and b/cloudcms/static/cloudcms/images/cloud_03.png differ

diff --git a/cloudcms/static/cloudcms/images/shadow_01.png b/cloudcms/static/cloudcms/images/shadow_01.png
new file mode 100644 (file)
index 0000000..e8c5888
Binary files /dev/null and b/cloudcms/static/cloudcms/images/shadow_01.png differ

diff --git a/cloudcms/static/cloudcms/images/shadow_02.png b/cloudcms/static/cloudcms/images/shadow_02.png
new file mode 100644 (file)
index 0000000..97480af
Binary files /dev/null and b/cloudcms/static/cloudcms/images/shadow_02.png differ

diff --git a/cloudcms/static/cloudcms/images/shadow_03.png b/cloudcms/static/cloudcms/images/shadow_03.png
new file mode 100644 (file)
index 0000000..97480af
Binary files /dev/null and b/cloudcms/static/cloudcms/images/shadow_03.png differ

diff --git a/cloudcms/static/cloudcms/js/common.js b/cloudcms/static/cloudcms/js/common.js
index 3e1779c..d6874f7 100644 (file)
--- a/cloudcms/static/cloudcms/js/common.js
+++ b/cloudcms/static/cloudcms/js/common.js
@@ -95,6 +95,27 @@ $(document).ready(function() {
        }\r
     )\r
     \r
+    $('#animation a').hover(\r
+      function () {\r
+        $(this).animate({\r
+         top: '+=-10'   \r
+        });\r
+        $(this).siblings('p').find('img').animate({\r
+          width: '60%'       \r
+        });\r
+      }, \r
+      function () {\r
+        $(this).animate({\r
+         top: '0'   \r
+            \r
+        });\r
+        $(this).siblings('p').find('img').animate({\r
+          width: '65%'       \r
+        });\r
+      }\r
+    );\r
+    \r
+    \r
 });\r
 \r
 $(window).resize(function() {\r