sync
authorAlan Knowles <alan@roojs.com>
Wed, 9 Jan 2019 10:06:53 +0000 (18:06 +0800)
committerAlan Knowles <alan@roojs.com>
Wed, 9 Jan 2019 10:06:53 +0000 (18:06 +0800)
docs2/Roo.docs.MobileSidebarMenu.bjs [new file with mode: 0644]
docs2/Roo.docs.MobileSidebarMenu.js [new file with mode: 0644]
docs2/docs.css [new file with mode: 0644]
images/roojsorg_logo-100.png [new file with mode: 0644]

diff --git a/docs2/Roo.docs.MobileSidebarMenu.bjs b/docs2/Roo.docs.MobileSidebarMenu.bjs
new file mode 100644 (file)
index 0000000..e04f557
--- /dev/null
@@ -0,0 +1,102 @@
+{
+ "name" : "Roo.docs.MobileSidebarMenu",
+ "parent" : "#disabled",
+ "title" : "",
+ "path" : "/home/alan/gitlive/roojs1/docs2/Roo.docs.MobileSidebarMenu.bjs",
+ "permname" : "",
+ "modOrder" : "001",
+ "strings" : {
+  "54e1d44609e3abed11f6e1eb6ae54988" : "Projects",
+  "f66cdb8a3ef49c79c633e1bffcfd1e74" : "Awards",
+  "0cbc6611f5540bd0809a388dc95a615b" : "Test",
+  "27c7b8732d1a279720d27cc8c3a26c93" : "Careers",
+  "992a0f0542384f1ee5ef51b7cf4ae6c4" : "Services",
+  "bbaff12800505b22a853e8b7f4eb6a22" : "Contact",
+  "38b0d2ff1c03df82aea67222983d337e" : "test 2"
+ },
+ "items" : [
+  {
+   "listeners" : {
+    "beforetoggle" : "function (_self)\n{\n    _this.navGroup.autoExpand(); \n    \n    _this.navGroup.activeLookup();\n    \n    _this.navHeaderBar.mask.show();\n    \n    if(this.el.select('.navbar-collapse',true).first().hasClass('in')){\n        _this.navHeaderBar.mask.hide();\n        return;\n    }\n}",
+    "render" : "function (_self)\n{\n    _this.navHeaderBar = this;\n    \n    this.el.addClass(language); \n    \n    var body = Roo.select('body', true).first();\n    \n    var mark = {\n        tag: \"div\",\n        cls:\"x-dlg-mask\"\n    };\n    \n    this.mask = Roo.DomHelper.append(body, mark, true);\n    \n    var size = body.getSize();\n    this.mask.setSize(size.width, size.height);\n    \n    this.mask.setStyle('z-index', '1029');\n    \n    this.mask.enableDisplayMode(\"block\");\n    this.mask.hide();\n    \n    this.mask.on('click', function(){\n        \n        this.el.select('.navbar-collapse',true).removeClass('in'); \n        this.mask.hide();\n        \n    }, this);\n    \n    \n    var maxHeight = Roo.lib.Dom.getViewHeight() - this.el.select('.navbar-header', true).first().getHeight();\n    \n    this.el.select('.navbar-collapse', true).first().setStyle('max-height', maxHeight);\n    \n}"
+   },
+   "$ String brand_href" : "baseURL + '/'",
+   "String position" : "fixed-top",
+   "String cls" : "mobile-header-menu",
+   "bool autohide" : true,
+   "xtype" : "NavHeaderbar",
+   "Boolean inverse" : false,
+   "$ xns" : "Roo.bootstrap",
+   "String brand" : " ",
+   "String style" : "",
+   "items" : [
+    {
+     "listeners" : {
+      "render" : "function (_self)\n{\n    _this.navGroup = this;\n    \n}"
+     },
+     "| function activeLookup" : "function() \n{ \n    return;\n    var pathname = window.location.pathname.substring(baseURL.length);\n    \n    if(!pathname.length){\n        return;\n    }\n    \n    if(pathname.match(/^\\/Projects/)){\n        pathname = '/Projects';\n    }\n    \n    var lookupPath = function(item)\n    {\n        if(typeof(item.href) == 'undefined' || !item.href.length || item.href == '#'){\n            return true;\n        }\n        \n        item.el.removeClass('active');\n        \n        var href = item.href.substring(baseURL.length);\n        \n        if(href != pathname){\n            return true;\n        }\n        \n        item.el.addClass('active');\n        return false;\n            \n    };\n    \n    var seted = false;\n    \n    Roo.each(_this.navGroup.items, function(i){\n        \n        var s = lookupPath(i);\n        \n        if(!s){\n            return false;\n        }\n        \n        if(typeof(i.menu) == 'undefined' || !i.menu.items.length){\n            return;\n        }\n        \n        Roo.each(i.menu.items, function(ii){\n            \n            var ss = lookupPath(ii);\n            \n            if(!ss){\n                seted = true;\n                return false;\n            }\n            \n        });\n        \n        if(seted){\n            return false;\n        }\n        \n    });\n}",
+     "String type" : "nav",
+     "xtype" : "NavGroup",
+     "String align" : "right",
+     "$ xns" : "Roo.bootstrap",
+     "| function autoExpand" : "function() \n{ \n    return;\n    _this.menu_expand = false;\n    \n    var lookupMenu = function(menu, index){\n        \n        if(menu.target == pagedata.page.target){\n            _this.menu_expand = index;\n            return;\n        }\n        \n        if(!menu.children.length){\n            return;\n        }\n        \n        Roo.each(menu.children, function(c){\n            lookupMenu(c, index);\n        });\n        \n    }\n    \n    Roo.each(pagemenus, function(v, k){\n        \n        lookupMenu(v, k);\n        \n    });\n    \n    if(_this.menu_expand === false){\n        return;\n    }\n    \n    if(typeof(_this.navGroup.items[_this.menu_expand].menu) == 'undefined'){\n        return;\n    }\n    \n    _this.navGroup.items[_this.menu_expand].menu.show(_this.navGroup.items[_this.menu_expand].el, false, false);\n    \n}",
+     "items" : [
+      {
+       "xtype" : "NavSidebarItem",
+       "$ xns" : "Roo.bootstrap",
+       "String html" : "Test",
+       "items" : [
+        {
+         "String type" : "treeview",
+         "xtype" : "Menu",
+         "$ xns" : "Roo.bootstrap",
+         "* prop" : "menu",
+         "items" : [
+          {
+           "xtype" : "MenuItem",
+           "$ xns" : "Roo.bootstrap",
+           "String html" : "Test",
+           "$ String href" : "baseURL + '/AboutUs.html'"
+          },
+          {
+           "xtype" : "MenuItem",
+           "$ xns" : "Roo.bootstrap",
+           "String html" : "test 2"
+          }
+         ]
+        }
+       ]
+      },
+      {
+       "xtype" : "NavSidebarItem",
+       "$ xns" : "Roo.bootstrap",
+       "String html" : "Projects",
+       "$ String href" : "baseURL + '/Projects.html'"
+      },
+      {
+       "xtype" : "NavSidebarItem",
+       "$ xns" : "Roo.bootstrap",
+       "String html" : "Services"
+      },
+      {
+       "xtype" : "NavSidebarItem",
+       "$ xns" : "Roo.bootstrap",
+       "String html" : "Awards"
+      },
+      {
+       "xtype" : "NavSidebarItem",
+       "$ xns" : "Roo.bootstrap",
+       "String html" : "Contact",
+       "$ String href" : "baseURL + '/ContactUs.html'"
+      },
+      {
+       "xtype" : "NavSidebarItem",
+       "$ xns" : "Roo.bootstrap",
+       "String html" : "Careers"
+      }
+     ]
+    }
+   ]
+  }
+ ]
+}
\ No newline at end of file
diff --git a/docs2/Roo.docs.MobileSidebarMenu.js b/docs2/Roo.docs.MobileSidebarMenu.js
new file mode 100644 (file)
index 0000000..0cbaf58
--- /dev/null
@@ -0,0 +1,272 @@
+//<script type="text/javascript">
+
+// Auto generated file - created by app.Builder.js- do not edit directly (at present!)
+
+Roo.namespace('Roo.docs');
+
+Roo.docs.MobileSidebarMenu = new Roo.XComponent({
+
+ _strings : {
+  '54e1d44609e3abed11f6e1eb6ae54988' :"Projects",
+  'f66cdb8a3ef49c79c633e1bffcfd1e74' :"Awards",
+  '0cbc6611f5540bd0809a388dc95a615b' :"Test",
+  '27c7b8732d1a279720d27cc8c3a26c93' :"Careers",
+  '992a0f0542384f1ee5ef51b7cf4ae6c4' :"Services",
+  'bbaff12800505b22a853e8b7f4eb6a22' :"Contact",
+  '38b0d2ff1c03df82aea67222983d337e' :"test 2"
+ },
+
+  part     :  ["docs2", "MobileSidebarMenu" ],
+  order    : '001-Roo.docs.MobileSidebarMenu',
+  region   : 'center',
+  parent   : '#disabled',
+  name     : "unnamed module",
+  disabled : false, 
+  permname : '', 
+  _tree : function(_data)
+  {
+   var _this = this;
+   var MODULE = this;
+   return {
+   xtype : 'NavHeaderbar',
+   autohide : true,
+   brand : ' ',
+   brand_href : baseURL + '/',
+   cls : 'mobile-header-menu',
+   inverse : false,
+   position : 'fixed-top',
+   style : '',
+   listeners : {
+    beforetoggle : function (_self)
+     {
+         _this.navGroup.autoExpand(); 
+         
+         _this.navGroup.activeLookup();
+         
+         _this.navHeaderBar.mask.show();
+         
+         if(this.el.select('.navbar-collapse',true).first().hasClass('in')){
+             _this.navHeaderBar.mask.hide();
+             return;
+         }
+     },
+    render : function (_self)
+     {
+         _this.navHeaderBar = this;
+         
+         this.el.addClass(language); 
+         
+         var body = Roo.select('body', true).first();
+         
+         var mark = {
+             tag: "div",
+             cls:"x-dlg-mask"
+         };
+         
+         this.mask = Roo.DomHelper.append(body, mark, true);
+         
+         var size = body.getSize();
+         this.mask.setSize(size.width, size.height);
+         
+         this.mask.setStyle('z-index', '1029');
+         
+         this.mask.enableDisplayMode("block");
+         this.mask.hide();
+         
+         this.mask.on('click', function(){
+             
+             this.el.select('.navbar-collapse',true).removeClass('in'); 
+             this.mask.hide();
+             
+         }, this);
+         
+         
+         var maxHeight = Roo.lib.Dom.getViewHeight() - this.el.select('.navbar-header', true).first().getHeight();
+         
+         this.el.select('.navbar-collapse', true).first().setStyle('max-height', maxHeight);
+         
+     }
+   },
+   xns : Roo.bootstrap,
+   '|xns' : 'Roo.bootstrap',
+   items  : [
+    {
+     xtype : 'NavGroup',
+     activeLookup : function() 
+     { 
+         return;
+         var pathname = window.location.pathname.substring(baseURL.length);
+         
+         if(!pathname.length){
+             return;
+         }
+         
+         if(pathname.match(/^\/Projects/)){
+             pathname = '/Projects';
+         }
+         
+         var lookupPath = function(item)
+         {
+             if(typeof(item.href) == 'undefined' || !item.href.length || item.href == '#'){
+                 return true;
+             }
+             
+             item.el.removeClass('active');
+             
+             var href = item.href.substring(baseURL.length);
+             
+             if(href != pathname){
+                 return true;
+             }
+             
+             item.el.addClass('active');
+             return false;
+                 
+         };
+         
+         var seted = false;
+         
+         Roo.each(_this.navGroup.items, function(i){
+             
+             var s = lookupPath(i);
+             
+             if(!s){
+                 return false;
+             }
+             
+             if(typeof(i.menu) == 'undefined' || !i.menu.items.length){
+                 return;
+             }
+             
+             Roo.each(i.menu.items, function(ii){
+                 
+                 var ss = lookupPath(ii);
+                 
+                 if(!ss){
+                     seted = true;
+                     return false;
+                 }
+                 
+             });
+             
+             if(seted){
+                 return false;
+             }
+             
+         });
+     },
+     align : 'right',
+     autoExpand : function() 
+     { 
+         return;
+         _this.menu_expand = false;
+         
+         var lookupMenu = function(menu, index){
+             
+             if(menu.target == pagedata.page.target){
+                 _this.menu_expand = index;
+                 return;
+             }
+             
+             if(!menu.children.length){
+                 return;
+             }
+             
+             Roo.each(menu.children, function(c){
+                 lookupMenu(c, index);
+             });
+             
+         }
+         
+         Roo.each(pagemenus, function(v, k){
+             
+             lookupMenu(v, k);
+             
+         });
+         
+         if(_this.menu_expand === false){
+             return;
+         }
+         
+         if(typeof(_this.navGroup.items[_this.menu_expand].menu) == 'undefined'){
+             return;
+         }
+         
+         _this.navGroup.items[_this.menu_expand].menu.show(_this.navGroup.items[_this.menu_expand].el, false, false);
+         
+     },
+     type : 'nav',
+     listeners : {
+      render : function (_self)
+       {
+           _this.navGroup = this;
+           
+       }
+     },
+     xns : Roo.bootstrap,
+     '|xns' : 'Roo.bootstrap',
+     items  : [
+      {
+       xtype : 'NavSidebarItem',
+       html : _this._strings['0cbc6611f5540bd0809a388dc95a615b'] /* Test */,
+       xns : Roo.bootstrap,
+       '|xns' : 'Roo.bootstrap',
+       menu : {
+        xtype : 'Menu',
+        type : 'treeview',
+        xns : Roo.bootstrap,
+        '|xns' : 'Roo.bootstrap',
+        items  : [
+         {
+          xtype : 'MenuItem',
+          href : baseURL + '/AboutUs.html',
+          html : _this._strings['0cbc6611f5540bd0809a388dc95a615b'] /* Test */,
+          xns : Roo.bootstrap,
+          '|xns' : 'Roo.bootstrap'
+         },
+         {
+          xtype : 'MenuItem',
+          html : _this._strings['38b0d2ff1c03df82aea67222983d337e'] /* test 2 */,
+          xns : Roo.bootstrap,
+          '|xns' : 'Roo.bootstrap'
+         }
+        ]
+       }
+      },
+      {
+       xtype : 'NavSidebarItem',
+       href : baseURL + '/Projects.html',
+       html : _this._strings['54e1d44609e3abed11f6e1eb6ae54988'] /* Projects */,
+       xns : Roo.bootstrap,
+       '|xns' : 'Roo.bootstrap'
+      },
+      {
+       xtype : 'NavSidebarItem',
+       html : _this._strings['992a0f0542384f1ee5ef51b7cf4ae6c4'] /* Services */,
+       xns : Roo.bootstrap,
+       '|xns' : 'Roo.bootstrap'
+      },
+      {
+       xtype : 'NavSidebarItem',
+       html : _this._strings['f66cdb8a3ef49c79c633e1bffcfd1e74'] /* Awards */,
+       xns : Roo.bootstrap,
+       '|xns' : 'Roo.bootstrap'
+      },
+      {
+       xtype : 'NavSidebarItem',
+       href : baseURL + '/ContactUs.html',
+       html : _this._strings['bbaff12800505b22a853e8b7f4eb6a22'] /* Contact */,
+       xns : Roo.bootstrap,
+       '|xns' : 'Roo.bootstrap'
+      },
+      {
+       xtype : 'NavSidebarItem',
+       html : _this._strings['27c7b8732d1a279720d27cc8c3a26c93'] /* Careers */,
+       xns : Roo.bootstrap,
+       '|xns' : 'Roo.bootstrap'
+      }
+     ]
+    }
+   ]
+  };  }
+});
diff --git a/docs2/docs.css b/docs2/docs.css
new file mode 100644 (file)
index 0000000..7be72c5
--- /dev/null
@@ -0,0 +1,919 @@
+/* fonts and font effects */
+
+body,
+.tooltip,
+.popover {
+    font-family: "Roboto", Helvetica, Arial, sans-serif;
+    font-weight: 400;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+    font-family:  "Roboto", Helvetica, Arial, sans-serif;
+    font-weight: 900;
+ } 
+
+.general-content-body .navbar .nav-item, 
+.general-content-body h2,
+.general-content-body h3,
+.general-content-body h5,
+.header-column h1 {
+    font-weight: 500;
+    font-size: 24px;
+             
+}
+.header-column h1 {
+    text-align: center;
+}
+.general-content-body h5 {
+    font-size: 12px;
+}
+.news-page .general-content-body h5 {
+    font-size: 20px;
+    font-weight: bold;
+}
+.news-page .general-content-body .btn-link.active  {
+    font-weight:  bold;
+}
+
+.general-content-body .navbar .nav-item {
+    font-size: 18px;
+}
+
+.left-menu-sidebar {
+    font-size:16px;
+
+}
+.left-menu-sidebar-options
+{
+    text-transform: uppercase;
+    
+}
+
+.left-menu-sidebar.sidebar .sidebar-menu.active  {
+    font-weight: bold;
+}
+
+.left-menu-sidebar.sidebar .sidebar-menu > li > a  {
+    color: #16114C;
+    padding: 12px 5px 12px 20px;
+}
+
+.left-menu-sidebar.sidebar .sidebar-menu>li>a, .sidebar .sidebar-menu li.open li.treeview-menu > a {
+    color: #16114C;
+}
+
+.left-menu-sidebar.sidebar .left-menu-sidebar-options {
+    padding-left: 8px;
+}
+
+.left-menu-sidebar.sidebar .sidebar-menu > li > a i {
+    color: #999;
+}
+
+.left-menu-sidebar.sidebar .sidebar-menu > li.active  {
+    background-color: #fff;
+    border-color: #eee;
+}
+
+.mobile-header-menu ul > li.active > a,
+.left-menu-sidebar.sidebar .sidebar-menu > li.active > a  {
+    font-weight: bold;
+}
+
+.left-menu-sidebar.sidebar .sidebar-menu .treeview-menu > li.active {
+    background-color: #fff;
+    border-color: #eee;
+}
+
+.left-menu-sidebar.sidebar .sidebar-menu .treeview-menu > li.active > a  {
+    font-weight: bold;
+}
+
+.left-menu-sidebar.sidebar .left-menu-sidebar-options .languages li a:hover {
+    color: #16114C;
+    font-weight: bold;
+}
+
+.left-menu-sidebar.sidebar .left-menu-sidebar-options .socials li a:hover > i {
+    background-color: #16114C;
+}
+
+.left-menu-sidebar.sidebar .sidebar-menu > li .treeview-menu a:hover,
+.left-menu-sidebar.sidebar .sidebar-menu > li a:hover {
+    color: #666;
+    font-weight: bold;
+}
+
+
+/* ------------------logo */
+
+.logo {
+    display:block;
+    width:225px;
+    height:62px;
+    /* might need to make this base 64, so that it works with other browsers? */
+    background-repeat: no-repeat;
+    
+    background-origin: content-box;
+    background-size: contain;
+}
+
+.left-menu-sidebar.sidebar .sidebar-menu > li > a.logo
+{
+    margin: 15px 0 0 18px;
+    padding: 0;
+}
+
+
+ .logo,
+ .mobile-header-menu .navbar-header a.navbar-brand {
+    background-image: url("../images/roojsorg_logo-100.png");
+}
+.sidebar-menu .nav-item .logo {
+    padding: 15px;
+}
+
+
+.sidebar .sidebar-menu > li, .sidebar .sidebar-menu li.active li.treeview-menu {
+    margin: 0;
+   
+    padding: 0;
+    border-bottom: 1px solid #eee;
+    background-color: #fff;
+}
+.sidebar .sidebar-menu li.open ul {
+    margin-left: 14px;
+}
+
+.left-menu-sidebar {
+    position: fixed;
+    width: 250px; /*320px;*/
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    background-repeat: no-repeat;
+    background-position: center center;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    display: none;
+}
+
+.left-menu-sidebar .left-menu-sidebar-options  {
+    position: fixed;
+    width: 250px; /*320px;*/
+    bottom: 10;
+    left: 0;
+    z-index: 999;
+    background: #fff;
+}
+
+.left-menu-sidebar .left-menu-sidebar-options ul.languages,
+.left-menu-sidebar .left-menu-sidebar-options ul.socials,
+.mobile-header-menu .mobile-header-menu-options ul.languages,
+.mobile-header-menu .mobile-header-menu-options ul.socials,
+.mobile-footer ul.socials {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: 12px;
+}
+
+.left-menu-sidebar .left-menu-sidebar-options ul.languages > li,
+.mobile-header-menu .mobile-header-menu-options ul.languages > li {
+    float: left;
+    padding: 0 15px;
+    border-right: 1px solid #000;
+}
+
+.left-menu-sidebar .left-menu-sidebar-options ul.languages > li:last-child,
+.mobile-header-menu .mobile-header-menu-options ul.languages > li:last-child {
+    border-right: none;
+}
+
+.left-menu-sidebar .left-menu-sidebar-options ul.languages > li > a {
+    color: #000;
+}
+
+.mobile-header-menu .mobile-header-menu-options ul.languages > li > a {
+    color: #777;
+}
+
+.left-menu-sidebar .left-menu-sidebar-options ul.socials > li:first-child,
+.mobile-header-menu .mobile-
+header-menu-options ul.socials > li:first-child,
+.mobile-footer ul.socials > li:first-child {
+    padding-left: 15px;
+}
+
+.left-menu-sidebar .left-menu-sidebar-options ul.socials > li
+{
+    float: left;
+    padding: 0 1px;
+}
+.mobile-header-menu .mobile-header-menu-options ul.socials > li,
+.mobile-footer ul.socials > li {
+    float: left;
+    padding: 0 3px;
+}
+
+.left-menu-sidebar .left-menu-sidebar-options ul.socials > li i {
+    width: 30px;
+    height: 30px;
+    background-color: #666;
+    line-height: 30px;
+    text-align: center;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 14px;
+}
+
+.mobile-header-menu .mobile-header-menu-options ul.socials > li i,
+.mobile-footer ul.socials > li i {
+    width: 35px;
+    height: 35px;
+    background-color: #777;
+    line-height: 35px;
+    text-align: center;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 14px;
+}
+
+.main-content,
+.general-content-head,
+.about-us-head {
+    margin-right: 10px;
+    margin-left:10px; 
+    margin-top: 60px;
+}
+/* articles need footer padding really */
+.main-content {
+    margin-right: 10px;
+    margin-bottom: 100px;
+}
+.home .main-content,
+.services .main-content,
+.main-content-projects.main-content {
+    margin-bottom: 0px;
+}
+
+/* head is diplay none by default - but shown on bigger screens */
+.home .main-content,
+.general-content-head {
+    display: none;
+}
+
+.mobile-general-content-head {
+    display: block;
+    margin-top: 60px;
+}
+
+.mobile-general-content-head {
+    /*padding-right: 10px;*/
+}
+
+.mobile-general-brick-block {
+    margin: 0px;
+}
+
+.mobile-general-brick-block .column {
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+.mobile-footer {
+    display: block;
+}
+
+
+.home .mobile-main-content {
+    display: block;
+    /*margin-bottom: 100px;*/
+    margin-top: 50px;
+}
+
+.mobile-header-menu {
+    display: block;
+}
+
+.awards-item + .awards-item {
+    margin-top: 30px;
+}
+
+.awards-item-image + .awards-item-image {
+    margin-top: 15px;
+}
+
+.award-years-brick .roo-brick-paragraph {
+    max-width: 150px;
+    max-height: 150px;
+    margin-top: 15px;
+}
+
+.projects-options {
+    margin: 0px;
+}
+
+.main-content-projects-container label {
+    display: none;
+}
+
+.projects-options .projects-option-selector {
+    padding: 0px;
+}
+.main-content-projects-container {
+    margin-top:0px;
+    width:100%;
+    padding: 0px;
+}
+
+.left-menu-sidebar .languages,
+.mobile-header-menu .languages {
+    font-weight: normal;
+}
+
+.left-menu-sidebar .languages .active,
+.mobile-header-menu .languages .active {
+    font-weight: bold;
+}
+
+/* ----------- General bricks ------------ */
+
+.general-brick-block {
+    margin: 0px;
+}
+
+.general-brick-block .column + .column {
+    margin-top: 10px;
+}
+
+.general-brick-block + .general-brick-block {
+    margin-top: 10px;
+}
+
+.general-brick-block .column {
+    padding-left: 0px;
+    padding-right: 10px;
+    margin-top: 0px;
+    margin-bottom: 10px;
+}
+
+.general-brick-block,
+.related-projects h2 {
+   margin: 0 auto;
+   max-width: 400px;
+   margin-top:20px;
+   margin-bottom: 10px;
+}
+
+.general-brick-block .column + .column {
+    margin-top: 0px;
+}
+
+.general-brick-block + .general-brick-block {
+    margin-top: 10px;
+}
+
+.general-brick-block .column:last-child {
+    /*margin-top: 10px;*/
+}
+
+.general-content-body {
+    margin-top: 7px;
+}
+
+.general-content-body .related-projects {
+    padding: 0px;
+    /*margin-top: 55px;*/
+}
+
+.image-location-block {
+    margin: 10px 0 0 0;
+}
+
+.image-location-block .column {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.image-location-block .image-location-icons .image-location-baidu-icon {
+    position: absolute;
+    bottom: 5px;
+    left: 10px
+}
+
+.image-location-block .image-location-icons .image-location-google-icon {
+    position: absolute;
+    bottom: 5px;
+    right: 5px
+}
+
+
+.image-location-baidu-icon {
+    background-image: url(/templates/images/baidu-map-icon.png);
+    background-repeat: no-repeat;
+    background-size: 100%;
+    width: 30px;
+    height: 30px;
+    float: right;
+    border-radius: 15px;
+    cursor: pointer;
+}
+
+.image-location-google-icon {
+    background-image: url(/templates/images/google-map-icon.png);
+    background-repeat: no-repeat;
+    background-size: 100%;
+    width: 30px;
+    height: 30px;
+    float: right;
+    border-radius: 15px;
+    cursor: pointer;
+}
+
+.slide-container .tab-pane,
+.home-slide-container .tab-pane {
+    background-size: cover;
+    background-position: bottom;
+    background-attachment: scroll; 
+}
+
+.slide-container {
+    margin-top: 15px;
+}
+
+.home-slide-container {
+    margin-top: 0px;
+}
+.main-content-projects-container form {
+    margin-bottom: 0;
+}
+
+@media (min-width: 768px) {
+    
+    .mask-inverse .masonry-brick-paragraph {
+        background: rgba(22, 17, 76, 0.25);
+    }
+
+/*    .general-brick-block .column:first-child {
+        padding-left: 0px;
+        padding-right: 0px;
+    }
+
+    .general-brick-block .column:last-child {
+        padding-left: 1px;
+        padding-right: 0px;
+        margin-top: 0;
+    }*/
+    
+    .left-menu-sidebar {
+        display: block;
+    }
+
+    .mobile-header-menu {
+        display: none;
+    }
+    
+    .main-content,
+    .general-content-head,
+    .about-us-head {
+        margin-left:260px; 
+        margin-top: 10px;
+    }
+
+    .general-content-head {
+        display: block;
+    }
+    
+    .mobile-general-content-head {
+        display: none;
+    }
+    
+    .mobile-footer {
+        display: none;
+    }
+
+    .general-content-body,
+    .slide-container {
+        margin-left: 260px;
+    }
+    
+    .project-detail .general-content-body,
+    .project-detail .slide-container {
+        margin-right: 40px;
+    }
+    
+    .home .main-content {
+        display: block;
+    }
+    
+    .home .mobile-main-content {
+        display: none;
+    }
+    
+    .projects-options .projects-option-selector:nth-child(2) {
+        padding: 0px 15px;
+    }
+    
+    .services .main-content {
+        top: 0px;
+    }
+    .main-content .header-column h1 {
+        text-align: center;
+        padding-bottom: 11px;
+    
+    }
+    /** awards / news ?  header bar to wide **/
+    .news-page .general-content-body > .row {
+        margin: 0;
+    }
+    
+}
+
+@media (min-width: 992px) {
+    .awards-item-image + .awards-item-image {
+        margin-top: 0px;
+        margin-bottom: 15px;
+    }
+    
+    
+    
+}
+@media (min-width: 1170px) {
+    .main-content,
+    .general-content-body,
+    .slide-container {
+        margin-left: 270px; /*340px;*/
+    }
+    
+    .project-detail .general-content-body,
+    .project-detail .slide-container {
+        margin-left: 370px; 
+        margin-right: 100px;
+    }
+}
+ /* -- mobile -- */
+.news-page .input-group {
+    display:inline-table;
+}
+@media (max-width: 768px) {
+    .general-content-body,
+    .slide-container {
+        margin: 10px;
+    }
+    roo-select2-container
+    .services .main-content {
+        margin-top: 40px;
+    }
+    .news-page .form-group .roo-select2-container {
+        display:inline-block;
+    }
+    .news-page .form-group  {
+        display:inline-block;
+    }
+    .slide-container {
+        margin-top: 50px;
+        margin-left: 0;
+        margin-right: 0;
+    }
+    
+    .projects-options .projects-option-selector {
+        padding: 1px 0;
+    }
+    .form-group {
+        margin-bottom: 5px;
+    }
+    .main-content-projects.main-content,
+    .services .main-content {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .main-content-projects .header-column h1,
+    .services .header-column h1 {
+        text-align: center;
+        font-weight: 500;
+        font-size: 24px;
+        margin-top: 0px;
+        border-bottom: 1px solid #eee;
+        padding-bottom: 8px;
+        text-transform: uppercase;
+        
+    }
+    .services .header-column h1
+    {
+        margin-bottom: 0;
+    }
+    .main-content-projects .x-combo-noedit {
+        border: 0;
+        border-color: white !important;
+        border-radius: 0;
+        font-size: 10px;
+        box-shadow: none;
+        text-transform: uppercase;
+
+    }
+    
+    .navbar-header .navbar-toggle  {
+        border: none;
+    }
+    .main-content-projects-container form {
+        margin-bottom: 0;
+            margin-top: -10px;
+    }
+    .navbar-default,
+    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
+        background: white;
+    }
+    
+   
+    .general-content-body .navbar .navbar-nav .nav-item {
+        width: 32%;
+            float: left;
+    }
+    .general-content-body .navbar .navbar-nav {
+        margin-top: 20px;
+        margin-bottom: 0;
+    }
+    .general-content-body .navbar {
+        margin-bottom: 0;
+    }
+    
+    /** home page tiles text larger */
+    
+    body.home .masonry-brick-title {
+        font-size: 19px;
+    }
+        
+    .services .masonry-brick-image.masonry-center-title > .masonry-brick-paragraph .masonry-brick-title {
+        font-size: 28px;
+    }
+    
+}
+
+ .dropdown-menu b,
+ .masonry-brick-paragraph .masonry-brick-title,
+ .roo-select2-container input
+ {
+        font-size:14px;
+        font-weight: normal;
+   }
+
+
+ /* .masonry-brick-paragraph .masonry-brick-title, */
+ .roo-select2-container input
+ {
+         text-transform: uppercase;
+   }
+
+
+@media (min-width: 992px) {
+    
+    .masonry-brick-paragraph .masonry-brick-title {
+        font-size: 18px;
+    }
+    
+}
+
+.mobile-header-menu .navbar-header a.navbar-brand {
+    display:block;
+    width: 200px;
+    height: 34px;
+    background-repeat: no-repeat;
+    margin: 10px 10px 2px;
+    
+}
+
+
+.mobile-header-menu .navbar-header a.navbar-brand {
+    text-transform: uppercase;
+}
+
+.mobile-header-menu .navbar-nav li > a
+{
+    font-weight: normal;
+}
+
+.mobile-header-menu .mobile-header-menu-options,
+.roo-combobox-touch-view .roo-combobox-list-group-item-value,
+.roo-combobox-touch-view .modal-header,
+.roo-combobox-touch-view .btn
+{
+    text-transform: uppercase;
+    font-weight: normal;
+}
+.roo-combobox-touch-view .modal-content,
+.roo-combobox-touch-view .list-group-item
+{
+    border: none;
+    border-radius: 0;
+}
+
+
+.roo-combobox-touch-view .list-group-item {
+    padding: 10px 0;
+}
+
+.roo-combobox-touch-view .selected .roo-combobox-list-group-item-value {
+    font-weight: 900;
+    text-transform: uppercase;
+}
+
+.roo-combobox-touch-view .roo-combobox-list-group-item-box {
+    display:none;
+}
+.roo-combobox-touch-view .btn {
+    color: #333;
+    background-color: #fff;
+    border-color: #ccc;
+}
+
+.roo-touchview-combobox .dropdown-toggle {
+    display: none;
+}
+
+/**
+ * youtube / youku
+ */
+
+.lang-en .link-youku {
+    display:none;
+}
+
+.lang-zh-hk .link-youtube,
+.lang-zh-cn .link-youtube
+{
+    display:none;
+}
+
+.enable-overflow {
+    overflow : auto;
+}
+
+.mobile-footer {
+    background-color: #333;
+    color: #9e9e9e;
+    padding: 25px 15px;
+    font-size: 12px;
+  /*  text-transform: uppercase;  */
+}
+
+.mobile-footer .title {
+    color: #fff;
+    letter-spacing: 1.5px;
+    font-size: 100%;
+}
+
+.mobile-footer a {
+    color: #9e9e9e;
+}
+
+.slideshow-text {
+    text-align: center;
+    color: #fff;
+    text-shadow: 4px 4px 6px rgba(0,0,0,.6);
+    font-size: 20px;
+    text-transform: uppercase;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    left: 0%;
+    background: linear-gradient(to top,rgba(0,0,0,.5),rgba(1,1,1,0));
+    padding: 5px;
+}
+
+.contact-us-location-content h4.roo-brick-title
+{
+    font-weight: normal;
+     font-size: 14px;
+}
+.contact-us-location-content .roo-brick-text
+{
+    font-size: 12px;
+}
+@media (max-width: 768px) {
+    .contact-us-location-content h4.roo-brick-title
+    {
+        font-weight: normal;
+        font-size: 12px;
+    }
+    .contact-us-location-content .roo-brick-text
+    {
+            font-size: 10px;
+            line-height: 1.0em;
+    }
+}
+
+.roo-required-indicator.left-indicator {
+    display: none;
+}
+
+.panel-hpa > .panel-heading {
+    background-color: #16114C;
+    color: white;
+}
+
+
+/** - share this.. lighten... */
+.st-btn {
+    background: #666 !important;
+}
+.st-btn:hover {
+    background: #16114C !important;
+}
+
+.st-right {
+    top: 15px !important;
+}
+
+.home .masonry-md-brick.masonry-bottom-title h4 ,
+.home .masonry-sm-brick.masonry-bottom-title h4 {
+    font-size:  28px;
+}
+@media (max-width: 768px) {
+    .home .masonry-md-brick.masonry-bottom-title h4 ,
+    .home .masonry-sm-brick.masonry-bottom-title h4 {
+        font-size:  16px;
+        vertical-align: middle;
+        text-align: center;
+    }
+}
+    
+.contact-us-location-content .roo-brick.deep-grey
+{
+    background-color: #c2cde0; 
+}
+
+/* this is in the mansorary code?? not sure why? */
+.masonry-brick-split .masonry-brick-split-head,
+.masonry-brick-split .masonry-brick-split-head .masonry-brick-paragraph {
+    height: 96%;
+}
+.masonry-brick-split .masonry-brick-split-body {
+    height: 4%;
+}
+/* hide the news at present */
+.mobile-home-news {
+    display: none;
+}
+
+/* really old iphone */
+@media (max-width: 330px) {
+    .services .masonry-brick-image.masonry-center-title>.masonry-brick-paragraph .masonry-brick-title {
+        font-size: 24px;
+    }
+    .main-content-projects .masonry-brick .masonry-brick-title
+    {
+        font-size: 12px;
+    }
+    .contact-us-location-content h4.roo-brick-title
+    {
+        font-size: 9px;
+        margin-bottom: 4px;
+
+    }
+    .contact-us-location-content .roo-brick-text {
+        font-size: 7px
+    }
+}
+
+.dont-break-out {
+    /* These are technically the same, but use both */
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+
+    -ms-word-break: break-all;
+    /* This is the dangerous one in WebKit, as it breaks things wherever */
+    word-break: break-all;
+    /* Instead use this non-standard one: */
+    word-break: break-word;
+
+    /* Adds a hyphen where the word breaks, if supported (No Blink) */
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+}
+
+iframe.masonry-brick-image-view {
+    object-fit: fill;
+}
\ No newline at end of file
diff --git a/images/roojsorg_logo-100.png b/images/roojsorg_logo-100.png
new file mode 100644 (file)
index 0000000..a8ba786
Binary files /dev/null and b/images/roojsorg_logo-100.png differ