From: Olga Brani <olgabrani@grnet.gr>
Date: Tue, 26 Jun 2012 13:26:46 +0000 (+0300)
Subject: Fixes
X-Git-Tag: v0.7.0~33
X-Git-Url: https://code.grnet.gr/git/snf-cloudcms/commitdiff_plain/7405e79a6134c622dd66a3342ab3a0f799530287

Fixes
---

diff --git a/cloudcms/static/cloudcms/css/boxsizing.htc b/cloudcms/static/cloudcms/css/boxsizing.htc
new file mode 100644
index 0000000..6d2e835
--- /dev/null
+++ b/cloudcms/static/cloudcms/css/boxsizing.htc
@@ -0,0 +1,308 @@
+/**
+* CSS-JS-BOOSTER
+* 
+* A polyfill for box-sizing: border-box for IE6 & IE7.
+* 
+* JScript
+* 
+* This program is free software: you can redistribute it and/or modify
+* it under the terms of the GNU Lesser General Public License as published 
+* by the Free Software Foundation, either version 3 of the License, or
+* (at your option) any later version.
+* 
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+* GNU Lesser General Public License for more details.
+* 
+* See <http://www.gnu.org/licenses/lgpl-3.0.txt>
+* 
+* @category  JScript 
+* @package   box-sizing-polyfill
+* @author    Christian Schepp Schaefer <schaepp@gmx.de> <http://twitter.com/derSchepp>
+* @copyright 2010 Christian Schepp Schaefer
+* @license   http://www.gnu.org/copyleft/lesser.html The GNU LESSER GENERAL PUBLIC LICENSE, Version 3.0
+* @link      http://github.com/Schepp/box-sizing-polyfill 
+*
+* PREFACE:
+*
+* This box-sizing polyfill is based on previous work done by Erik Arvidsson, 
+* which he published in 2002 on http://webfx.eae.net/dhtml/boxsizing/boxsizing.html.
+*
+* USAGE:
+* 	
+* Add the behavior/HTC after every `box-sizing: border-box;` that you assign:
+* 
+* box-sizing: border-box;
+* *behavior: url(/scripts/boxsizing.htc);`
+* 
+* If you prefix the `behavior` property with a star, like seen above, it will only be seen by 
+* IE6 & IE7, not by IE8+ (it's a hack) which is better for the performance on those newer browsers.
+*
+* The URL to the HTC file must be relative to your HTML(!) document, not relative to your CSS.
+* That's why I'd advise you to use absolute paths like in the example.
+*
+*/
+<component lightWeight="true">
+<attach event="onpropertychange" onevent="checkPropertyChange()" />
+<attach event="ondetach" onevent="restore()" />
+<attach event="onresize" for="window" onevent="restore();init()" />
+<script type="text/javascript">
+//<![CDATA[
+
+var viewportwidth = (typeof window.innerWidth != 'undefined' ? window.innerWidth : element.document.documentElement.clientWidth);
+// Shortcut for the document object
+var doc = element.document;
+
+/*
+* init gets called once at the start and then never again, 
+* triggers box-sizing calculations and updates width and height
+*/
+function init(){
+	// check for IE8+
+	if(typeof(element.style.boxSizing) == "undefined"){
+		updateBorderBoxWidth();
+		updateBorderBoxHeight();
+	}
+}
+
+/*
+* restore gets called when the behavior is being detached (see event binding at the top),
+* resets everything like it was before applying the behavior
+*/
+function restore(){
+	// check for IE8+
+	if(typeof(element.style.boxSizing) == "undefined"){
+		element.runtimeStyle.width = "";
+		element.runtimeStyle.height = "";
+	}
+}
+
+/*
+* checkPropertyChange gets called as soon as an element property changes 
+* (see event binding at the top), it then checks if any property influencing its 
+* dimensions was changed and if yes recalculates width and height 
+*/
+function checkPropertyChange(){
+	// check for IE8+
+	if(typeof(element.style.boxSizing) == "undefined"){
+		var pn = event.propertyName;
+		var undef;
+		if(pn == "style.boxSizing" && element.style.boxSizing == ""){
+			element.style.removeAttribute("boxSizing");
+			element.runtimeStyle.boxSizing = undef;
+		}
+		switch (pn){
+			case "style.width":
+			case "style.borderLeftWidth":
+			case "style.borderLeftStyle":
+			case "style.borderRightWidth":
+			case "style.borderRightStyle":
+			case "style.paddingLeft":
+			case "style.paddingRight":
+				updateBorderBoxWidth();
+			break;
+		
+			case "style.height":
+			case "style.borderTopWidth":
+			case "style.borderTopStyle":
+			case "style.borderBottomWidth":
+			case "style.borderBottomStyle":
+			case "style.paddingTop":
+			case "style.paddingBottom":
+				updateBorderBoxHeight();
+			break;
+		
+			case "className":
+			case "style.boxSizing":
+				updateBorderBoxWidth();
+				updateBorderBoxHeight();
+			break;
+		}
+	}
+}
+
+/* 
+ * Helper function, taken from Dean Edward's IE7 framework,
+ * added by Schepp on 12.06.2010.
+ * http://code.google.com/p/ie7-js/
+ *
+ * Allows us to convert from relative to pixel-values.
+ */
+function getPixelValue(value){
+	var PIXEL = /^\d+(px)?$/i;
+	if (PIXEL.test(value)) return parseInt(value);
+	var style = element.style.left;
+	var runtimeStyle = element.runtimeStyle.left;
+	element.runtimeStyle.left = element.currentStyle.left;
+	element.style.left = value || 0;
+	value = parseInt(element.style.pixelLeft);
+	element.style.left = style;
+	element.runtimeStyle.left = runtimeStyle;
+	
+	return value;
+}
+
+function getPixelWidth(object, value){
+	// For Pixel Values
+	var PIXEL = /^\d+(px)?$/i;
+	if (PIXEL.test(value)) return parseInt(value);
+	
+	// For Percentage Values
+	var PERCENT = /^[\d\.]+%$/i;
+	if (PERCENT.test(value)){
+		try{
+			parentWidth = getPixelWidth(object.parentElement,(object.parentElement.currentStyle.width != "auto" ? object.parentElement.currentStyle.width : "100%"));
+			value = (parseFloat(value) / 100) * parentWidth;
+		}
+		catch(e){
+			value = (parseFloat(value) / 100) * element.document.documentElement.clientWidth;
+		}
+		return parseInt(value);
+	}
+	
+	// For EM Values
+	var style = object.style.left;
+	var runtimeStyle = object.runtimeStyle.left;
+	object.runtimeStyle.left = object.currentStyle.left;
+	object.style.left = value || 0;
+	value = parseInt(object.style.pixelLeft);
+	object.style.left = style;
+	object.runtimeStyle.left = runtimeStyle;
+	
+	return value;
+}
+
+
+/*
+ * getBorderWidth & friends
+ * Border width getters
+ */
+function getBorderWidth(sSide){
+	if(element.currentStyle["border" + sSide + "Style"] == "none"){
+		return 0;
+	}
+	var n = getPixelValue(element.currentStyle["border" + sSide + "Width"]);
+	return n || 0;
+}
+function getBorderLeftWidth() { return getBorderWidth("Left"); }
+function getBorderRightWidth() { return getBorderWidth("Right"); }
+function getBorderTopWidth() { return getBorderWidth("Top"); }
+function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
+
+
+/*
+ * getPadding & friends
+ * Padding width getters
+ */
+function getPadding(sSide) {
+	var n = getPixelValue(element.currentStyle["padding" + sSide]);
+	return n || 0;
+}
+function getPaddingLeft() { return getPadding("Left"); }
+function getPaddingRight() { return getPadding("Right"); }
+function getPaddingTop() { return getPadding("Top"); }
+function getPaddingBottom() { return getPadding("Bottom"); }
+
+
+
+/*
+ * getBoxSizing
+ * Get the box-sizing value for the current element
+ */
+function getBoxSizing(){
+	var s = element.style;
+	var cs = element.currentStyle
+	if(typeof s.boxSizing != "undefined" && s.boxSizing != ""){
+		return s.boxSizing;
+	}
+	if(typeof s["box-sizing"] != "undefined" && s["box-sizing"] != ""){
+		return s["box-sizing"];
+	}
+	if(typeof cs.boxSizing != "undefined" && cs.boxSizing != ""){
+		return cs.boxSizing;
+	}
+	if(typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != ""){
+		return cs["box-sizing"];
+	}
+	return getDocumentBoxSizing();
+}
+
+
+/*
+ * getDocumentBoxSizing
+ * Get the default document box sizing (check for quirks mode)
+ */
+function getDocumentBoxSizing(){
+	if(doc.compatMode == null || doc.compatMode == "BackCompat"){
+		return "border-box";
+	}
+	return "content-box"
+}
+
+
+/*
+ * setBorderBoxWidth & friends
+ * Width and height setters
+ */
+function setBorderBoxWidth(n){
+	element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
+		getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
+}
+function setBorderBoxHeight(n){
+	element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
+		getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
+}
+function setContentBoxWidth(n){
+	element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
+		getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
+}
+function setContentBoxHeight(n){
+	element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
+		getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
+}
+
+
+/*
+ * updateBorderBoxWidth & updateBorderBoxHeight
+ * 
+ */
+function updateBorderBoxWidth() {
+	if(getDocumentBoxSizing() == getBoxSizing()){
+		return;
+	}
+	var csw = element.currentStyle.width;
+	if(csw != "auto"){
+		csw = getPixelWidth(element,csw);
+		if(getBoxSizing() == "border-box"){
+			setBorderBoxWidth(parseInt(csw));
+		}
+		else{
+			setContentBoxWidth(parseInt(csw));
+		}
+	}
+}
+
+function updateBorderBoxHeight() {
+	if(getDocumentBoxSizing() == getBoxSizing()){
+		return;
+	}
+	var csh = element.currentStyle.height;
+	if(csh != "auto"){
+		csh = getPixelValue(csh);
+		if(getBoxSizing() == "border-box"){
+			setBorderBoxHeight(parseInt(csh));
+		}
+		else{
+			setContentBoxHeight(parseInt(csh));
+		}
+	}
+}
+
+
+// Run the calculations
+init();
+
+//]]>
+</script>
+</component>
\ No newline at end of file
diff --git a/cloudcms/static/cloudcms/css/custom.css b/cloudcms/static/cloudcms/css/custom.css
new file mode 100644
index 0000000..59b44be
--- /dev/null
+++ b/cloudcms/static/cloudcms/css/custom.css
@@ -0,0 +1,10 @@
+ul.messages li { margin-bottom: 5px }
+ul.messages { background-color: transparent; }
+ul.messages li a { font-weight: normal !important }
+ul.messages li.notice { background-color: #284A5E }
+ul.messages li.notice { color: #FFF }
+ul.messages li.notice a { color: #FFF }
+ul.messages li.notice2 { background-color: #F54500 }
+ul.messages li.notice2 { color: #FFF }
+ul.messages li.notice2 { background-color: #F54500 }
+ul.messages li.notice2 a { color: #FFF }
diff --git a/cloudcms/static/cloudcms/css/formating.css b/cloudcms/static/cloudcms/css/formating.css
index d83eb06..df8438c 100644
--- a/cloudcms/static/cloudcms/css/formating.css
+++ b/cloudcms/static/cloudcms/css/formating.css
@@ -39,7 +39,7 @@ em, i											{ font-style:italic; font-weight:inherit; }
 h1, h2, h3, h4, h5, h6							{ font-weight:bold; line-height:1.4; margin-bottom:0; }
 /* Typographic scale based on 12px body size */
 h1												{ font-size:4em; }
-h2												{ font-size:1em; }
+h2												{ font-size:1.154em; }
 h3												{ font-size:1em; }
 h4												{ font-size:1.5em; }
 h5												{ font-size:1.333em; }
diff --git a/cloudcms/static/cloudcms/css/forms.css b/cloudcms/static/cloudcms/css/forms.css
index 835a933..afd8ad8 100644
--- a/cloudcms/static/cloudcms/css/forms.css
+++ b/cloudcms/static/cloudcms/css/forms.css
@@ -5,8 +5,6 @@ input, textarea, .form-widget 				{ background-color: #ffffff; color: #000;borde
 #forms input:focus 							{ position: relative; border: 1px solid #000; z-index: 100; }
 #forms .input:focus label,
 #forms input:focus label 					{ z-index: 300; }
-.altcol 									{ background-color: #c3c3b9 !important; }
-.altcol:hover 								{ background-color: #f89a1c !important; }
 form.withlabels label 						{ width: 224px; display: block; float: left; padding-top: 1em; }
 form.withlabels input[type=text], 
 form.withlabels input[type=password] 		{ width: 224px; }
@@ -45,17 +43,15 @@ form input.text:focus label,
 form input[type="text"]:focus label,
 form input[type="password"]:focus label 	{ z-index: 300;}
 form input.submit, 
-form input[type="submit"]					{font-family: 'Antic', sans-serif;font-size: 14px; font-weight: normal; line-height: 22px; letter-spacing:1px; background-color: #3582ac; color: #ffffff; border: none; padding: 10px 22px;font-size: 1em; margin:15px 0 0 223px; height:43px; }
+form input[type="submit"]					{font-family: 'Antic', sans-serif;font-size: 14px; font-weight: normal; line-height: 22px; letter-spacing:1px;  background-color: #f89a1c;color: #ffffff; border: none; padding: 10px 22px;font-size: 1em; margin:15px 0 0 223px; height:43px; }
 form.innerlabels input.submit, 
 form.innerlabels input[type="submit"]		{margin-left:0;}
 form input.submit:hover, 
-form input[type="submit"]:hover 			{ background-color: #f89a1c;}
+form input[type="submit"]:hover 			{ background-color:#3582ac;border-color:#3582ac;}
 form input.submit.back, 
 form input[type="submit"].back 				{ text-decoration: none; bottom: 0; float: right; z-index: 500; }
 form input.submit.back.right, 
 form input[type="submit"].back.right 		{right: 0;}
-form input.submit:hover, 
-form input[type="submit"]:hover 			{ background-color: #f89a1c; border-color:#f89a1c;}
 form input.submit.back, 
 form input[type="submit"].back 				{ text-decoration: none; bottom: 0; float: right; z-index: 500; }
 form input.submit.back.right, 
@@ -121,7 +117,7 @@ form .with-hidden							{ display:none; }
 #okeanos_recaptcha .actions-wrap				{ border-top:1px solid #808080 }
 
 input.submit:focus,
-input[type="submit"]:focus						{ box-shadow: 0 0 0 1px #FFFFFF inset; border:1px solid #C3C3B9; outline:0 none; }						
+input[type="submit"]:focus						{ box-shadow: 0 0 0 1px #FFFFFF inset; border:1px solid #F89A1C; outline:0 none; }						
 
 @media screen and (max-width : 591px) 		{ 
 	form.withlabels .extra-img	   				{ left:222px; }
@@ -146,4 +142,10 @@ input[type="submit"]:focus						{ box-shadow: 0 0 0 1px #FFFFFF inset; border:1p
 	#okeanos_recaptcha							{ width:inherit }
 	#okeanos_recaptcha #recaptcha_response_field	{ width:55%; }
 	#okeanos_recaptcha #recaptcha_image	img		{ width:80%; }
+}
+
+
+@media screen and ( width : 320px) 		{ 
+	#okeanos_recaptcha							{ width:259px }
+    
 }
\ No newline at end of file
diff --git a/cloudcms/static/cloudcms/css/max768.css b/cloudcms/static/cloudcms/css/max768.css
index e9fc855..39325fa 100644
--- a/cloudcms/static/cloudcms/css/max768.css
+++ b/cloudcms/static/cloudcms/css/max768.css
@@ -6,6 +6,8 @@
 .buttons-list .button 							{ margin-left:0; }
 .container .lt-div								{ float:none; width:auto; }
 .container ul.options 							{ margin-bottom:30px; }
+.documentation .wrap							{ width:auto; }
+.documentation img								{ max-width:100%; }
 /* forms */
 form input.submit, form input[type="submit"] 	{ margin:0; }
 form .form-row .extra-link 						{ padding-top:0; }
\ No newline at end of file
diff --git a/cloudcms/static/cloudcms/css/modules.css b/cloudcms/static/cloudcms/css/modules.css
index 331c2ca..9652b40 100644
--- a/cloudcms/static/cloudcms/css/modules.css
+++ b/cloudcms/static/cloudcms/css/modules.css
@@ -1,4 +1,4 @@
-body											{ min-width:320px; overflow-y: scroll;}
+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;}
@@ -13,7 +13,7 @@ img.right						                { margin:0 0 1em 1em; float:right;}
 .footer a                                       { color:#B3B3B3; text-decoration:none; transition:color 0.15s ease-in-out 0s; -moz-transition: color 0.15s ease-in-out 0s;  -webkit-transition: color 0.15s ease-in-out 0s;  -o-transition: color 0.15s ease-in-out 0s; } 
 .footer:hover a                                 { color:#808080;}
 .footer a:hover                                 { color:#000;}
-.footer ul                                      { float:left; margin:0 22px 0 0; width:140px;  padding:0;}
+.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;}
@@ -35,20 +35,28 @@ img.right						                { margin:0 0 1em 1em; float:right;}
 .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, .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						                { 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; }
@@ -57,9 +65,8 @@ img.right						                { margin:0 0 1em 1em; float:right;}
 .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;}
-.content .question h2							{ color:#4085A6 }
+.content .question h2							{ color:#EF4F54 }
 .content .backlink								{ margin:1em 0; }
-.content .question .backlink a					{ border:0 none; color:#F89A1C }
 .content .question .backlink a:hover			{ border-bottom:1px solid #F89A1C }
 .faq h3											{ color:#4085a6; margin:0;}
 .faq ul                                         { padding:0; margin:0; }
@@ -92,12 +99,10 @@ p.info a:hover                                  { color:#000; border-bottom:0 no
 .cyclades .bg-wrap .extra .hide-extra:hover img { margin-top:-32px;}
 .pithos h2, .pithos a:hover,                     
 .pithos .extra .options li h3                     { color:#F89A1C; }
-.cyclades h2, .cyclades a:hover,                     
+.cyclades h2,                 
 .cyclades .extra .options li h3                   { color:#4085A6; }
-.cyclades a							            { border-bottom:1px solid #4085A6; }
-.cyclades a:hover							    { border-bottom:1px solid #4085A6; }
 a.btn_01                                        { display:block; text-align:center; background:#F6921E; color:#000; padding:10px; text-decoration:none; border:0 none;}
-a.btn_01:hover                                  { background:#01A1AE; color:#000; border:0 none;}
+a.btn_01:hover                                  { background:#01A1AE; 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; }
@@ -116,11 +121,11 @@ a.videolink:hover				                { background:url(../images/video_image.png)
 .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 .categories .clear:hover				{ border-bottom:1px solid #000; }
 .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;}
diff --git a/cloudcms/static/cloudcms/css/print.css b/cloudcms/static/cloudcms/css/print.css
index d9bf9d6..d5db53b 100644
--- a/cloudcms/static/cloudcms/css/print.css
+++ b/cloudcms/static/cloudcms/css/print.css
@@ -1 +1 @@
-body											{ font:normal 12pt Arial, sans-serif; color:#000; line-height:1.5; }
a img											{ border:0; }
a												{ color:#000; }
a:link:after,a:visited:after,
a:link::after,a:visited::after					{ content:" (" attr(href) ")"; font-size:smaller; }
\ No newline at end of file
+body											{ font:normal 12pt Arial, sans-serif; color:#000; line-height:1.5; }
a img											{ border:0; }
a												{ color:#000; }
a:link:after,a:visited:after,
a:link::after,a:visited::after					{ content:" (" attr(href) ")"; font-size:smaller; }


.cloudbar,
.footer,
.container ul.options,
.pagination,
.navigation										{ display: none; visibility:hidden }
.container .wrapper								{ border:0 none; width:auto; padding:1em; }
.mainlogo										{ margin-bottom:20px; }
.two-cols .rt, 
.two-cols .lt 									{ float:none; width:100%; }
.bg-wrap .extra 								{ display:block!important }
.button.back									{ display:none; }
\ No newline at end of file
diff --git a/cloudcms/static/cloudcms/images/documentation.png b/cloudcms/static/cloudcms/images/documentation.png
new file mode 100644
index 0000000..32f35bf
Binary files /dev/null and b/cloudcms/static/cloudcms/images/documentation.png differ