brooklyn-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From henev...@apache.org
Subject [02/13] incubator-brooklyn git commit: refactor CSS and apply to javadoc
Date Tue, 20 Jan 2015 16:12:20 GMT
refactor CSS and apply to javadoc

javadoc now doesn't look unloved, and datestamp is only on overview summary page
(means we can update files much more easily),
also SHA1 is on overview summary page for completeness


Project: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/commit/310c4148
Tree: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/tree/310c4148
Diff: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/diff/310c4148

Branch: refs/heads/master
Commit: 310c4148ea70ae54f668253cf8bddb187a37e9f3
Parents: 677762b
Author: Alex Heneveld <alex.heneveld@cloudsoftcorp.com>
Authored: Mon Jan 19 12:11:39 2015 +0000
Committer: Alex Heneveld <alex.heneveld@cloudsoftcorp.com>
Committed: Mon Jan 19 22:57:24 2015 +0000

----------------------------------------------------------------------
 docs/.gitignore                      |   1 +
 docs/_build/build.sh                 |  15 +-
 docs/_build/javadoc-overview.html    |  21 +
 docs/_build/make-javadoc.sh          |  14 +-
 docs/_config.yml                     |   3 +
 docs/_includes/base-head.html        |   2 +-
 docs/_includes/base-scss.scss        |   1 +
 docs/_layouts/guide-normal.html      |  23 -
 docs/guide/start/config.md           |   2 +
 docs/style/css/_archive_warning.scss |  31 ++
 docs/style/css/_basic.scss           |  61 +++
 docs/style/css/_blueprint_tour.scss  | 175 +++++++
 docs/style/css/_code_blocks.scss     |  95 ++++
 docs/style/css/_footer.scss          |  36 ++
 docs/style/css/_landing.scss         |  26 +
 docs/style/css/_main_container.scss  |  78 +++
 docs/style/css/_menu.scss            | 201 ++++++++
 docs/style/css/_search.scss          |  29 ++
 docs/style/css/_tooltips.scss        |  14 +
 docs/style/css/_util.scss            |  27 +
 docs/style/css/base.scss             | 793 ------------------------------
 docs/style/css/guide-toc.css         |  88 ----
 docs/style/css/guide.css             | 119 -----
 docs/style/css/javadoc.scss          | 119 +++++
 docs/style/css/website.scss          |  19 +
 25 files changed, 963 insertions(+), 1030 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/.gitignore
----------------------------------------------------------------------
diff --git a/docs/.gitignore b/docs/.gitignore
index 1311819..3767b72 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -1,2 +1,3 @@
 _site
 _config_local.yml
+.sass-cache

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/_build/build.sh
----------------------------------------------------------------------
diff --git a/docs/_build/build.sh b/docs/_build/build.sh
index 74d8a30..eb9215a 100755
--- a/docs/_build/build.sh
+++ b/docs/_build/build.sh
@@ -43,6 +43,7 @@ function parse_mode() {
     exit 0 ;;
   website-root)
     JEKYLL_CONFIG=_config.yml,_build/config-production.yml,_build/config-exclude-guide.yml,_build/config-website-root.yml
+    STYLE_SUBDIR=style
     DIRS_TO_MOVE[0]=website
     DIRS_TO_MOVE_TARGET[0]=""
     SKIP_JAVADOC=true
@@ -55,7 +56,8 @@ function parse_mode() {
     DIRS_TO_MOVE[0]=guide
     DIRS_TO_MOVE_TARGET[0]=v/latest
     DIRS_TO_MOVE[1]=style
-    DIRS_TO_MOVE_TARGET[1]=v/latest/style
+    STYLE_SUBDIR=${DIRS_TO_MOVE_TARGET[0]}/style
+    DIRS_TO_MOVE_TARGET[1]=$STYLE_SUBDIR
     INSTALL_RSYNC_OPTIONS=""
     INSTALL_RSYNC_SUBDIR=${DIRS_TO_MOVE_TARGET[0]}/
     JAVADOC_TARGET=${DIRS_TO_MOVE_TARGET[0]}/$JAVADOC_SUBPATH/
@@ -68,7 +70,8 @@ function parse_mode() {
     # BROOKLYN_VERSION_BELOW
     DIRS_TO_MOVE_TARGET[0]=v/0.7.0-SNAPSHOT
     DIRS_TO_MOVE[1]=style
-    DIRS_TO_MOVE_TARGET[1]=${DIRS_TO_MOVE_TARGET[0]}/style
+    STYLE_SUBDIR=${DIRS_TO_MOVE_TARGET[0]}/style
+    DIRS_TO_MOVE_TARGET[1]=$STYLE_SUBDIR
     INSTALL_RSYNC_OPTIONS=""
     INSTALL_RSYNC_SUBDIR=${DIRS_TO_MOVE_TARGET[0]}/
     JAVADOC_TARGET=${DIRS_TO_MOVE_TARGET[0]}/$JAVADOC_SUBPATH/
@@ -78,6 +81,7 @@ function parse_mode() {
     JEKYLL_CONFIG=_config.yml,_build/config-production.yml,_build/config-exclude-all-but-guide.yml,_build/config-guide-root.yml
     DIRS_TO_MOVE[0]=guide
     DIRS_TO_MOVE_TARGET[0]=""
+    STYLE_SUBDIR=style
     JAVADOC_TARGET=$JAVADOC_SUBPATH/
     SUMMARY="user guide files in the root"
     ;;
@@ -87,6 +91,7 @@ function parse_mode() {
     DIRS_TO_MOVE_TARGET[0]=v/latest
     DIRS_TO_MOVE[1]=website
     DIRS_TO_MOVE_TARGET[1]=""
+    STYLE_SUBDIR=style
     JAVADOC_TARGET=${DIRS_TO_MOVE_TARGET[0]}/$JAVADOC_SUBPATH/
     SUMMARY="all files, website in root and guide in /${DIRS_TO_MOVE_TARGET[0]}"
     ;;
@@ -97,12 +102,14 @@ function parse_mode() {
     DIRS_TO_MOVE[1]=website
     DIRS_TO_MOVE_TARGET[1]=brooklyn
     DIRS_TO_MOVE[2]=style
-    DIRS_TO_MOVE_TARGET[2]=brooklyn/style
+    STYLE_SUBDIR=${DIRS_TO_MOVE_TARGET[1]}/style
+    DIRS_TO_MOVE_TARGET[2]=$STYLE_SUBDIR
     JAVADOC_TARGET=${DIRS_TO_MOVE_TARGET[0]}/$JAVADOC_SUBPATH/
     SUMMARY="all files in /brooklyn"
     ;;
   original)
     JEKYLL_CONFIG=_config.yml,_build/config-production.yml
+    STYLE_SUBDIR=style
     SUMMARY="all files in their original place"
     ;;
   "")
@@ -192,6 +199,8 @@ function make_javadoc() {
       return 1
     fi
     mv _build/target/$JAVADOC_BUILD_TARGET_SUBPATH/* _site/$JAVADOC_TARGET
+    cat _site/${STYLE_SUBDIR}/css/javadoc.css >> _site/$JAVADOC_TARGET/stylesheet.css || return 1
+    cp _site/${STYLE_SUBDIR}/img/feather.png _site/$JAVADOC_TARGET/ || return 1
   fi
 }
 

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/_build/javadoc-overview.html
----------------------------------------------------------------------
diff --git a/docs/_build/javadoc-overview.html b/docs/_build/javadoc-overview.html
new file mode 100644
index 0000000..a429ea3
--- /dev/null
+++ b/docs/_build/javadoc-overview.html
@@ -0,0 +1,21 @@
+<html><body>
+
+<!-- BROOKLYN_VERSION -->
+Javadoc for <a href="http://brooklyn.io"> Apache Brooklyn</a> 0.7.0-SNAPSHOT
+
+<p>
+                Apache Brooklyn is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the 
+                Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the
+                infrastructure, communications, and decision making process have stabilized in a manner consistent with other
+                successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of
+                the code, it does indicate that the project has yet to be fully endorsed by the ASF.
+</p>
+<p>
+                Apache Brooklyn is distributed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.
+</p>
+
+<p>
+This is the Javadoc for v 0.7.0-SNAPSHOT (git SHA1 hash ${SHA1STAMP}) auto-generated on ${DATESTAMP}.
+</p> 
+
+</body><html>

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/_build/make-javadoc.sh
----------------------------------------------------------------------
diff --git a/docs/_build/make-javadoc.sh b/docs/_build/make-javadoc.sh
index 1a80efd..9dd9f82 100755
--- a/docs/_build/make-javadoc.sh
+++ b/docs/_build/make-javadoc.sh
@@ -19,7 +19,9 @@ fi
 mkdir -p target
 rm -rf target/$JAVADOC_TARGET1_SUBPATH/
 
+export YEARSTAMP=`date "+%Y"`
 export DATESTAMP=`date "+%Y-%m-%d"`
+export SHA1STAMP=`git rev-parse HEAD`
 
 # BROOKLYN_VERSION_BELOW
 export BROOKLYN_JAVADOC_CLASSPATH=../../usage/all/target/brooklyn-all-0.7.0-SNAPSHOT-with-dependencies.jar
@@ -40,8 +42,10 @@ javadoc -sourcepath $SOURCE_PATHS \
   -classpath "${BROOKLYN_JAVADOC_CLASSPATH}" \
   -doctitle "Apache Brooklyn" \
   -windowtitle "Apache Brooklyn" \
-  -header "Apache Brooklyn" \
-  -footer '<b>Apache Brooklyn - Multi-Cloud Application Management</b> <br/> <a href="http://brooklyn.io/" target="_top">brooklyn.io</a>. Apache License. &copy; '$DATESTAMP'.' \
+  -notimestamp \
+  -overview javadoc-overview.html \
+  -header '<a href="/" class="brooklyn-header">Apache Brooklyn <div class="img"></div></a>' \
+  -footer '<b>Apache Brooklyn - Multi-Cloud Application Management</b> <br/> <a href="http://brooklyn.io/" target="_top">brooklyn.io</a>. Apache License. &copy; '$YEARSTAMP'.' \
 2>&1 1>/dev/null | tee target/javadoc.log
 
 if ((${PIPESTATUS[0]})) ; then echo ; echo ; echo "ERROR: javadoc process exited non-zero" ; exit 1 ; fi
@@ -51,7 +55,11 @@ if [ ! -f target/$JAVADOC_TARGET1_SUBPATH/brooklyn/entity/Entity.html ]; then ec
 
 if [ ! -z "`grep warnings target/javadoc.log`" ] ; then echo "WARNINGs occurred during javadoc build. See target/javadoc.log for more information." ; fi
 
-if [ -d ../_site/guide/$$JAVADOC_TARGET2_SUBPATH/ ] ; then
+sed -i.bak s/'${DATESTAMP}'/"${DATESTAMP}"/ target/$JAVADOC_TARGET1_SUBPATH/overview-summary.html
+sed -i.bak s/'${SHA1STAMP}'/"${SHA1STAMP}"/ target/$JAVADOC_TARGET1_SUBPATH/overview-summary.html
+rm target/$JAVADOC_TARGET1_SUBPATH/*.bak
+
+if [ -d ../_site/guide/$JAVADOC_TARGET2_SUBPATH/ ] ; then
   echo "API directory detected in test structure _site, copying docs there so they can be served with serve-site.sh"
   cp -r target/$JAVADOC_TARGET1_SUBPATH/* ../_site/guide/$JAVADOC_TARGET2_SUBPATH/
 fi

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/_config.yml
----------------------------------------------------------------------
diff --git a/docs/_config.yml b/docs/_config.yml
index 343da20..121dbad 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -41,6 +41,9 @@ root_menu_page: /website/index.md
 # These files should not be included in the final build (in addition to _* contents)
 exclude: ['/Gemfile*','/README.md']
 
+sass:
+    sass_dir: style/css
+
 brooklyn-stable-version: 0.7.0-M2-incubating
 
 brooklyn-version: 0.7.0-SNAPSHOT # BROOKLYN_VERSION

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/_includes/base-head.html
----------------------------------------------------------------------
diff --git a/docs/_includes/base-head.html b/docs/_includes/base-head.html
index 7286eb7..dc1d31f 100644
--- a/docs/_includes/base-head.html
+++ b/docs/_includes/base-head.html
@@ -10,7 +10,7 @@
 
 <link rel="stylesheet" href="{{ site.path.style }}/css/code.css" type="text/css" media="screen" />
 
-<link href="{{site.path.style}}/css/base.css" rel="stylesheet">
+<link href="{{site.path.style}}/css/website.css" rel="stylesheet">
 
 <script src="{% dependency_url jquery.js %}"></script>
 <script src="{% dependency_url bootstrap.js %}"></script>

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/_includes/base-scss.scss
----------------------------------------------------------------------
diff --git a/docs/_includes/base-scss.scss b/docs/_includes/base-scss.scss
index d102394..aec3e2f 100644
--- a/docs/_includes/base-scss.scss
+++ b/docs/_includes/base-scss.scss
@@ -1,5 +1,6 @@
 
 $fonts: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$header_fonts: Avenir, $fonts;
 
 // colors
 

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/_layouts/guide-normal.html
----------------------------------------------------------------------
diff --git a/docs/_layouts/guide-normal.html b/docs/_layouts/guide-normal.html
deleted file mode 100644
index 67278e7..0000000
--- a/docs/_layouts/guide-normal.html
+++ /dev/null
@@ -1,23 +0,0 @@
----
-# Licensed to the Apache Software Foundation (ASF) under one
-# or more contributor license agreements.  See the NOTICE file
-# distributed with this work for additional information
-# regarding copyright ownership.  The ASF licenses this file
-# to you under the Apache License, Version 2.0 (the
-# "License"); you may not use this file except in compliance
-# with the License.  You may obtain a copy of the License at
-# 
-#  http://www.apache.org/licenses/LICENSE-2.0
-# 
-# Unless required by applicable law or agreed to in writing,
-# software distributed under the License is distributed on an
-# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-# KIND, either express or implied.  See the License for the
-# specific language governing permissions and limitations
-# under the License.
-
-layout: website-normal
----
-
-{{ content }}
-

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/guide/start/config.md
----------------------------------------------------------------------
diff --git a/docs/guide/start/config.md b/docs/guide/start/config.md
index 1fa61be..10895d6 100644
--- a/docs/guide/start/config.md
+++ b/docs/guide/start/config.md
@@ -5,6 +5,8 @@ layout: website-normal
 menu_parent: index.md
 ---
 
+{% include fields.md %}
+
 Brooklyn reads startup configuration from a file `~/.brooklyn/brooklyn.properties`, by default.
 You can create this from a template [brooklyn.properties]({{brooklyn_properties_url_path}}) file which you edit.
 

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/_archive_warning.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/_archive_warning.scss b/docs/style/css/_archive_warning.scss
new file mode 100644
index 0000000..5803458
--- /dev/null
+++ b/docs/style/css/_archive_warning.scss
@@ -0,0 +1,31 @@
+/* ARCHIVE PAGE WARNING
+   ----------------------------------------------------------------------- */
+
+#page_notes {
+    display: none;
+    background-color: #4D9D3A;
+    border: 3px solid orange;
+    -moz-border-radius: 8px;
+    border-radius: 8px;
+    padding: 0.3em;
+    padding-left: 0.75em;
+    margin-top: 24px;
+    margin-bottom: -24px;
+
+ div.warning {
+    background-color: #F8CB9C;
+    border: 1px solid #FFAB7C;
+    padding-left: 0.75em;
+    -moz-border-radius: 8px;
+    border-radius: 8px;
+ }
+ .warning_banner_image img {
+    width: 64px; padding-top: 8px; padding-right: 12px;
+    float: left;
+ }
+ p { line-height: 100%; color: white; }
+ p.warning_banner_buttons {padding-right: 24px; } 
+ p.warning_banner_buttons a, #page_notes p.warning_banner_buttons a:visited { 
+    color: orange; font-weight: bold; padding-right: 1em; text-decoration: none; }
+ p.warning_banner_buttons a:hover { color: #FFC31E; font-weight: bold; }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/_basic.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/_basic.scss b/docs/style/css/_basic.scss
new file mode 100644
index 0000000..2f5a989
--- /dev/null
+++ b/docs/style/css/_basic.scss
@@ -0,0 +1,61 @@
+/* BASIC STYLES
+   ----------------------------------------------------------------------- */
+body {
+    margin: 0px; 
+    padding: 60px 0px 20px 0px; 
+    font-family: $fonts;
+    font-weight: 300;
+    font-size: 17px; 
+    background-color: white; 
+    color: $text_color; 
+}
+h1, h2, h3, h4, h5, h6 { font-family: $header_fonts; }
+input, select, textarea {}
+p, li, label, td, th,input, select, textarea {}
+p, input, label, li {}
+p { margin: 0.75em 0; line-height: 1.4em;}
+form {padding: 0; margin: 0;}
+img {border: 0;}
+
+a {color: $a_color;}
+a:hover {text-decoration: none; color: $a_hover_color;}
+
+/* Offset link anchors so they are not hidden by the header */
+a[id]:empty, a[name]:empty {
+    padding-top: 60px;
+    margin-top: -60px;
+    display: block;
+}
+.dropdown-menu > li > a {
+  font-weight: 300;
+}
+.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger {
+    text-shadow: none;
+    font-weight: 300;
+}
+.btn-default {
+    color: $gray_66;
+}
+.panel-heading {
+  h4 {
+    padding-bottom: 0px;
+    margin-bottom: 0px;
+  }
+}
+.panel-body {
+    margin: 0px;
+    font-size: 95%;
+    color: $gray_66;
+    padding: 15px;
+    background-color: $white_fa;
+    border-radius: 5px;
+    p:first-child {
+      margin-top: 0px;
+    }
+    p:last-child {
+      margin-bottom: 0px;
+    }
+    > ul, > ol {
+      margin-left: -1em;
+    }
+}

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/_blueprint_tour.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/_blueprint_tour.scss b/docs/style/css/_blueprint_tour.scss
new file mode 100644
index 0000000..203ca03
--- /dev/null
+++ b/docs/style/css/_blueprint_tour.scss
@@ -0,0 +1,175 @@
+/* YAML EXPLAINED
+   ----------------------------------------------------------------------- */
+
+$explained_code_bg_color: $gray_66;
+$explained_code_fg_color: $white_dd;
+$explained_code_highlight_bg_color: $vibrant_bg_green; 
+$explained_code_highlight_fg_color: $white_fa;
+$explained_text_highlight_fg_color: $text_color;
+$explained_text_highlight_bg_color: $white_fa;
+
+$code_width: 57%;
+$annotation_width: 41%;
+
+div.annotated_blueprint {
+  margin-top: 60px;
+  div.code_scroller {
+    background-color: $code_bg_color;
+    border: 0.4em solid $explained_code_bg_color;
+    border-left: 0;
+    border-right: 0;
+    border-radius: 3px;
+    width: $code_width;
+    margin-right: 0px;
+    margin-left: auto;
+    background-color: $explained_code_bg_color;
+    color: $explained_code_fg_color;
+    overflow-x: scroll;
+    div { 
+      overflow-x: visible !important; 
+      overflow-y: visible !important; 
+    }  
+    div.code_viewer {
+      width: auto;
+      height: 100%;
+      div.block {
+        @include flex();
+        -webkit-align-items: center;
+        align-items: center;
+        z-index: -10;
+      }
+      div.block > div:last-child {
+          @include pre();
+          border: 0;
+          border-radius: 0;
+          padding: 0px 0.6em;
+          background-color: $explained_code_bg_color;
+          color: $explained_code_fg_color;
+          min-width: 100%;
+          margin-top: 3px;
+          margin-bottom: 3px;
+      }
+      div.block > div.annotations_wrapper1 {
+        font-family: $fonts;
+        div.annotations_wrapper2 {
+          // seems we have to use abs positioning because other techniques
+          // (translation, negative margins, etc) don't show up outside the scroll-x
+          position: absolute;
+          @include transform('translateX(-100%) translateY(-50%)');
+          width: $annotation_width;
+          
+          @include flex();
+          -webkit-align-items: center;
+          align-items: center;
+          div.annotations {
+            // positioning and sizing
+            height: auto;
+            width: 100%;
+            padding: 8px 8px;
+            color: $explained_text_highlight_fg_color;
+
+            div.short {
+              font-size: 125%;
+              text-align: right;
+            }
+            div.long {
+              display: none;
+              
+              font-size: 85%;
+              p { margin: 8px 0 8px 0; }
+              p:first-child { margin-top: 0; }
+              p:last-child { margin-bottom: 0; }
+            }
+          }
+          div.connector {
+            height: 7px;
+            width: 24px;
+          }
+        }
+      }
+      div.block:hover > div:last-child {
+          background-color: $explained_code_highlight_bg_color;
+          color: $explained_code_highlight_fg_color;
+          // TODO the bg color doesn't apply to regions which are only visible after a scroll-right :(
+          // to fix this i think we can us JS to set width of div.block to the width of this, the code last-child
+      }
+      div.block:hover {
+        z-index: 30 !important;
+        div.annotations_wrapper1 {
+          z-index: 30 !important;
+        }
+        div.annotations {
+          background-color: $explained_text_highlight_bg_color;
+          border: 4px solid $explained_code_highlight_bg_color;
+          border-radius: 8px;
+          text-align: center; 
+          div.short {
+            font-size: 100% !important;
+            text-align: center !important;
+            color: $text_color;
+            margin-bottom: 8px;
+            font-weight: bold; 
+            z-index: 10;
+          }
+          div.long { display: inherit !important; }
+        }
+        div.connector {
+          background-color: $explained_code_highlight_bg_color;
+        }
+      }
+      // highlighting of key code segments
+      div.block > div:last-child .ann_highlight { 
+        font-weight: bold; 
+        color: #e8f0e0; 
+      }
+      div.block:hover > div:last-child .ann_highlight { 
+        color: #f8fff8; 
+      }
+    }
+  }
+  div.code_viewer:hover {
+    div.annotations div.short {
+      color: $gray_aa;
+    }
+  }
+  
+  // have an initial notice
+  div.code_scroller {
+    div.initial_notice {
+      height: 0;
+      width: 0;
+      overflow-x: visible;
+      overflow-y: visible;
+    }
+    div.initial_notice > div {
+      z-index: 10;
+      background-color: transparentize($gray_aa, 0.1);
+      position: relative;
+      width: 0;
+      height: 0;
+      @include flex();
+      -webkit-align-items: top;
+      align-items: top;
+    }
+    div.initial_notice > div > div {
+      padding-top: 24px;
+      font-size: 125%;
+      font-weight: bold;
+      text-align: center;
+      width: 100%;
+      .ann_light {
+        padding-top: 12px;
+        font-weight: 300;
+      }
+      .ann_play {
+        display: block;
+        padding-top: 24px;
+        padding-bottom: 24px;
+        font-size: 600%;
+      }
+    }
+  }
+  div.code_scroller:hover div.initial_notice {
+    display: none;
+  }
+}

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/_code_blocks.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/_code_blocks.scss b/docs/style/css/_code_blocks.scss
new file mode 100644
index 0000000..269c6a0
--- /dev/null
+++ b/docs/style/css/_code_blocks.scss
@@ -0,0 +1,95 @@
+/* CODE RENDERING
+   ----------------------------------------------------------------------- */
+@mixin nowrap() {
+    white-space: pre;
+    word-wrap: normal;
+    overflow-y: scroll;
+}
+
+@mixin code() {
+    font-family: Consolas, Lucida Console, Monaco, monospace;
+    @include nowrap();
+    font-size: 14px;
+    /* override color and bg-color on 'code' from bootstrap, and a touch more padding on top since font-size is smaller */
+    color: $text_color;
+    background-color: $code_bg_color;
+}
+
+@mixin pre() {
+    @include code();
+    padding: 0.4em 0.8em;
+    overflow-x: scroll;
+    /* override border and line-height on 'pre' from bootstrap */
+    border: none;
+    border-radius: 2px;
+    line-height: 1.4;
+    font-size: 13px;
+}
+
+pre {
+    @include pre();
+    code {
+        /* override settings on 'pre code' from bootstrap */
+        @include pre();
+        line-height: 1;
+        /** and no padding since pre already has some */ 
+        padding: 0px; 
+    }
+}
+code {
+    @include code();
+    padding: 4px 4px 2px 4px;
+    border-radius: 3px;
+}
+
+.nowrap { @include nowrap(); }
+
+.highlight { background-color:$code_bg_color; } /* clipboard icon should have the same background color as the code */
+
+.highlight .clipboard_button { display: none; }
+.highlight:hover .clipboard_button { display: inherit; }
+.clipboard_button.zeroclipboard-is-hover { display: inherit; }
+
+.clipboard_container { float: right; padding: 8px; }
+.clipboard_button:before {
+  // fa-copy
+  content: "\f0c5";
+}
+.clipboard_button {
+  font-size: 18px;
+  color: $vibrant_fg_green;
+  @include transform('translateY(-2px)');
+}
+.clipboard_button:hover, .clipboard_button.zeroclipboard-is-hover {
+  color: $a_hover_color;
+  cursor: pointer; cursor: hand;
+}
+.clipboard_button.zeroclipboard-is-active .on-active {
+  display: inherit;
+}
+.clipboard_button .on-active {
+  // z-index often doesn't help here (diff stacking context to the side menu)... but it shouldn't hurt!
+  z-index: 10;
+  font-family: $fonts;
+  display: none;
+  margin-top: -20px;
+  height: 0;
+  width: 0;
+  overflow-x: visible;
+  overflow-y: visible;
+  position: relative;
+  top: -30px;
+}
+.clipboard_button .on-active > div {
+  background-color: $white_dd;
+  border: 1px solid $gray_aa;
+  font-size: 75%;
+  font-weight: normal;
+  left: -50%;
+  color: $blackish;
+  width: auto;
+  display: inline-block;
+  @include nowrap();
+  padding: 3px 7px;
+  @include transform('translateX(-50%)');
+}

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/_footer.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/_footer.scss b/docs/style/css/_footer.scss
new file mode 100644
index 0000000..4034de4
--- /dev/null
+++ b/docs/style/css/_footer.scss
@@ -0,0 +1,36 @@
+/* FOOTER
+   ----------------------------------------------------------------------- */
+
+/* sticky footer */
+html {
+    position: relative;
+    min-height: 100%;
+}
+
+@media (min-width: 1200px) {
+    .slightlyNarrowContainer {
+        width: 970px;
+    }
+}
+
+div#footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    background-color: $white_f5;
+    text-align: center;
+    font-size: 80%;
+}
+.octicon-footer {
+    color: $footer_icon_gray;
+    font-size: 130%;
+    position: relative;
+    top: 2px;
+    padding-left: 6px;
+}
+a:hover .octicon-footer {
+    color: $brooklyn_green;
+}
+

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/_landing.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/_landing.scss b/docs/style/css/_landing.scss
new file mode 100644
index 0000000..baeff39
--- /dev/null
+++ b/docs/style/css/_landing.scss
@@ -0,0 +1,26 @@
+
+/* LANDING PAGE
+   ----------------------------------------------------------------------- */
+
+.jumbotron {
+    margin-top: 18px;
+}
+
+#apachebrooklynbanner {
+    background-image: url("../img/apache-brooklyn-logo-817px-wide.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 817px;
+    height: 99px;
+    margin-bottom: 50px;
+}
+
+div.feather.landing {
+    overflow: visible;
+    max-height: 10px;
+    img {
+        width: 200px;
+        margin-left: 40px;
+        margin-top: 0px;
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/_main_container.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/_main_container.scss b/docs/style/css/_main_container.scss
new file mode 100644
index 0000000..09e2634
--- /dev/null
+++ b/docs/style/css/_main_container.scss
@@ -0,0 +1,78 @@
+
+#content_container {
+  padding-bottom: 48px;
+  img {
+    max-width: 100%;
+  }
+}
+
+
+/* HEADER LINKS 
+   ----------------------------------------------------------------------- */
+
+/* this causes jumps to anchors to show the anchor below the navbar */
+#content_container { h1, h2, h3, h4, h5, h6 {
+    margin-top: -64px;
+    padding-top: 64px;
+}}
+
+#content_container h1 {
+  max-width: 95%;
+  font-variant: normal;
+  margin-top: -16px;
+  padding-bottom: 6px;
+  margin-bottom: 24px;
+  border-bottom: 1px dotted $gray_aa;
+  font-weight: 300;
+  font-size: 36px;
+  text-transform: uppercase;
+}
+
+/* headings get a tooltip showing the permalink URL, a la github jekyll */
+/* install subset of font-awesome */
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.eot');
+  src: url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+.fa {
+  display: inline-block;
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.fa-link:before {
+  content: "\f0c1";
+}
+.fa-play-circle-o:before {
+  content: "\f01d";
+}
+/*
+ * This code is courtesy Ben Balter, modified by Parker Moore for jekyllrb.com
+ * http://ben.balter.com/2014/03/13/pages-anchor-links/
+ */
+.header-link {
+  position: relative;
+  left: 0.5em;
+  opacity: 0;
+  font-size: 0.8em;
+
+/* not using -- but this is cool!
+  -webkit-transition: opacity 0.2s ease-in-out 0.1s;
+  -moz-transition: opacity 0.2s ease-in-out 0.1s;
+  -ms-transition: opacity 0.2s ease-in-out 0.1s;
+*/
+}
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+  opacity: 1;
+}
+a.header-literal-anchor { display: inline !important; }

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/_menu.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/_menu.scss b/docs/style/css/_menu.scss
new file mode 100644
index 0000000..b63386e
--- /dev/null
+++ b/docs/style/css/_menu.scss
@@ -0,0 +1,201 @@
+/* WEBSITE MENUS
+   ----------------------------------------------------------------------- */
+
+/* top menu bar */
+.navbar-brand {
+    margin-top: -4px;
+    margin-left: -30px !important;
+}
+
+@mixin icon($name) {
+  .icon-#{$name} {
+    width: 32px;
+    height: 32px;
+    background: url('#{$style_dir}/img/'+$name+'-256-black.png');
+    background-size: 32px 32px;
+  }
+  .icon-#{$name}:hover {
+    background: url('#{$style_dir}/img/'+$name+'-256-green.png');
+    background-size: 32px 32px;
+  }
+}
+
+.navbar {
+    @include icon('github');
+    @include icon('twitter');
+    @include icon('irc');
+}
+
+.navbar .tooltip .tooltip-inner {
+    position: relative;
+    right: 40%;
+    // include calc for those browsers which support it
+    right: calc(50% - 25px);
+    max-width: 300px;
+}
+
+/* special container with sidebar where if sidebar is squeezed
+   (under "responsiveness") the text keeps at least its "auto" size,
+   squashing the main container instead */
+.container-and-sidebars {
+    width: 100%;
+    @include flex();
+}
+.container-between-sidebars {
+    -webkit-box-flex: 1 100%;
+    -webkit-flex: 1 100%;
+    -webkit-flex-flex: 1 100%;
+    flex: 1 100%;
+    flex: 10 1 100%;
+    display: inline-block;
+    width: auto;
+    margin-left: auto;
+    margin-right: auto;
+}
+.container-sidebar {
+    -webkit-box-flex: 0 auto;
+    -webkit-flex: 0 auto;
+    -webkit-flex-flex: 0 auto;
+    flex: 0 auto;
+    flex: 0 0 auto;
+}
+.container-sidebar-right { 
+    @extend .container-sidebar; 
+    text-align: left;
+    padding-right: 10px;
+} 
+.container-sidebar-left {
+    @extend .container-sidebar;
+    text-align: right;
+    padding-left: 10px;
+}
+
+@media (min-width: 768px) {
+  .container-sidebar { min-width: calc((100% - 750px)/2); }
+}
+@media (min-width: 992px) {
+  .container-sidebar { min-width: calc((100% - 970px)/2); }
+}
+@media (min-width: 1200px) {
+  .container-sidebar { min-width: calc((100% - 1170px)/2); }
+}
+
+
+.navbar-feather {
+  padding-top: 12px; 
+  margin-right: -6px;
+}
+.navbar-sidebar-right-icons {
+    padding-top: 10px;
+    margin-left: -6px;
+    white-space: nowrap;
+    a {
+      display: inline-block;
+      width: 32px;
+      height: 32px;
+    }
+}
+.navbar-icon-shift { margin-right: -2px; }
+
+.navbar div.dropdown_section_header hr {
+  margin: 4px 12px;
+  border-color: $white_dd;
+}
+
+.navbar div.dropdown_new_section hr {
+  margin: 6px 0px;
+  border-color: $white_dd;
+}
+
+/* pop-up top-menu */
+.navbar-default .navbar-nav > li > a:hover,
+.navbar-default .navbar-nav > li > a:focus,
+.navbar-default .navbar-nav > .active > a:hover,
+.navbar-default .navbar-nav > .active > a:focus {
+  background-color: $white_f5;
+  color: $brooklyn_green;
+}
+.top-menu {
+  font-size: 14px;
+  font-weight: 400;
+  .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+    background-color: $white_f5;
+    background-image: none;
+    color: $brooklyn_green;
+  }
+  ul.nav li.dropdown:hover > ul.dropdown-menu {
+    display: block;
+  }
+}
+
+/* side menu */
+.side-menu {
+  font-family: Avenir, $fonts;
+  font-size: 14px;
+  font-weight: 400;
+  position: fixed;
+  h4.with_following {
+    margin-bottom: 0;
+  }
+  h4.with_preceding {
+    margin-top: 0;
+  }
+  h4.with_following a {
+    border-bottom-right-radius: 0 !important ;
+    border-bottom-left-radius: 0 !important ;
+    border-bottom: 0;
+  }
+  h4.with_preceding a {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-top: 0;
+  }
+  a, a.breadcrumb.breadcrumb0 { padding-left: 15px; padding-top: 8px; padding-bottom: 6px; }
+  a.breadcrumb.breadcrumb1 { padding-left: 30px; }
+  a.breadcrumb.breadcrumb2 { padding-left: 45px; }
+  a.breadcrumb.breadcrumb3 { padding-left: 60px; }
+  /* further crumbs all get the same */
+  a.breadcrumb { padding-left: 70px; }
+  
+  div.sub-item {
+    background-color: $bootstrap_theme_green_gradient_lower;
+    border-left: 1px solid $bootstrap_blue_border;
+  } 
+  div.sub-item:last-child {
+    border-bottom: 1px solid $white_dd;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  div.sub-item:last-child a.sub-item:last-child {
+    border-bottom-right-radius: 4px !important;
+  }
+  a.with-sub-item {
+    /* border-bottom: 1px solid $white_dd; */
+    border-bottom: 0;
+  }
+  a.sub-item { 
+    border-radius: 0 !important;
+    border-bottom: 0;
+    margin-left: 12px;
+    padding-left: 10px; 
+    padding-top: 8px; 
+    padding-bottom: 8px; 
+  }
+  a.sub-item.list-group-item.active {
+    background-color: $white_f5;
+    // the below is needed to achieve the above, since bg-image is already set
+    background-image: -webkit-linear-gradient(top, $white_f5 0%, $white_f5 100%);
+    background-image: linear-gradient(to bottom, $white_f5 0%, $white_f5 100%);
+    
+    border-color: $white_dd;
+    color: $text_color;
+    text-shadow: none;
+    // not sure why the bottom border is visible at all, and stays on hover, but vanishes on 'active';
+    // but this sorts it out (taking 1 away from padding)
+    margin-bottom: 0;
+    padding-bottom: 7px;
+  }
+  a.sub-item.list-group-item.active:hover {
+    color: $a_hover_color;
+  }
+}

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/_search.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/_search.scss b/docs/style/css/_search.scss
new file mode 100644
index 0000000..21ef97f
--- /dev/null
+++ b/docs/style/css/_search.scss
@@ -0,0 +1,29 @@
+/* SEARCH
+   ----------------------------------------------------------------------- */
+
+div.search_right {
+  float: right;
+  @include transform('translateY(-12px)');
+  padding-right: 5%; 
+  padding-bottom: 18px;
+  font-size: 75%;
+  .searchform {
+    width: 240px; 
+    margin: 0; 
+    padding: 5px 5px 0 0; 
+    overflow: hidden; 
+    text-align: right;
+  }
+  .searchinput {
+    width: 227px; 
+    background: #ffffff; 
+    border: 1px solid #b1b7c2; 
+    -moz-border-radius: 2px; 
+    border-radius: 2px; 
+    color: #c8ccd5; 
+    padding: 3px;
+  }
+  .searchinput:focus {
+    color: $blackish;
+  }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/_tooltips.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/_tooltips.scss b/docs/style/css/_tooltips.scss
new file mode 100644
index 0000000..11dee6a
--- /dev/null
+++ b/docs/style/css/_tooltips.scss
@@ -0,0 +1,14 @@
+/* TOOLTIPS
+   ----------------------------------------------------------------------- */
+   
+.tooltip .tooltip-inner {
+    color: $text_color;
+    background-color: $white_dd;
+    font-weight: 500;
+}
+.tooltip.top .tooltip-arrow { 
+    border-top-color: $white_dd;
+}
+.tooltip.bottom .tooltip-arrow { 
+    border-bottom-color: $white_dd;
+}

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/_util.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/_util.scss b/docs/style/css/_util.scss
new file mode 100644
index 0000000..b6d4b44
--- /dev/null
+++ b/docs/style/css/_util.scss
@@ -0,0 +1,27 @@
+/* GENERAL UTILS
+   ----------------------------------------------------------------------- */
+
+@mixin flex() {
+  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;      /* TWEENER - IE 10 */
+  display: -webkit-flex;     /* NEW - Chrome */
+  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
+}
+
+@mixin transform($tfn) {
+  -webkit-transform: #{$tfn};
+  -moz-transform: #{$tfn};
+  -o-transform: #{$tfn};
+  transform: #{$tfn};
+}
+   
+@mixin flip() {
+  filter: FlipH;
+  @include transform('scaleX(-1)');
+  -ms-filter: "FlipH";
+}
+
+.flip {
+  @include flip;
+}

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/base.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/base.scss b/docs/style/css/base.scss
deleted file mode 100644
index 2f778ee..0000000
--- a/docs/style/css/base.scss
+++ /dev/null
@@ -1,793 +0,0 @@
----
----
-
-{% include base-scss.scss %}
-
-/* BASIC STYLES
-   ----------------------------------------------------------------------- */
-body {
-    margin: 0px; 
-    padding: 60px 0px 20px 0px; 
-    font-family: $fonts;
-    font-weight: 300;
-    font-size: 17px; 
-    background-color: white; 
-    color: $text_color; 
-}
-h1, h2, h3, h4, h5, h6 { font-family: Avenir, $fonts; }
-input, select, textarea {}
-p, li, label, td, th,input, select, textarea {}
-p, input, label, li {}
-p { margin: 0.75em 0; line-height: 1.4em;}
-form {padding: 0; margin: 0;}
-img {border: 0;}
-
-a {color: $a_color;}
-a:hover {text-decoration: none; color: $a_hover_color;}
-
-/* Offset link anchors so they are not hidden by the header */
-a[id]:empty, a[name]:empty {
-    padding-top: 60px;
-    margin-top: -60px;
-    display: block;
-}
-.dropdown-menu > li > a {
-  font-weight: 300;
-}
-.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger {
-    text-shadow: none;
-    font-weight: 300;
-}
-.btn-default {
-    color: $gray_66;
-}
-.panel-heading {
-  h4 {
-    padding-bottom: 0px;
-    margin-bottom: 0px;
-  }
-}
-.panel-body {
-    margin: 0px;
-    font-size: 95%;
-    color: $gray_66;
-    padding: 15px;
-    background-color: $white_fa;
-    border-radius: 5px;
-    p:first-child {
-      margin-top: 0px;
-    }
-    p:last-child {
-      margin-bottom: 0px;
-    }
-    > ul, > ol {
-      margin-left: -1em;
-    }
-}
-/* GENERAL UTILS
-   ----------------------------------------------------------------------- */
-
-@mixin flex() {
-  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-  display: -ms-flexbox;      /* TWEENER - IE 10 */
-  display: -webkit-flex;     /* NEW - Chrome */
-  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
-}
-
-@mixin transform($tfn) {
-  -webkit-transform: #{$tfn};
-  -moz-transform: #{$tfn};
-  -o-transform: #{$tfn};
-  transform: #{$tfn};
-}
-   
-@mixin flip() {
-  filter: FlipH;
-  @include transform('scaleX(-1)');
-  -ms-filter: "FlipH";
-}
-
-.flip {
-  @include flip;
-}
-
-/* CUSTOM HEADINGS 
-   ----------------------------------------------------------------------- */
-
-/* this causes jumps to anchors to show the anchor below the navbar */
-#content_container { h1, h2, h3, h4, h5, h6 {
-    margin-top: -64px;
-    padding-top: 64px;
-}}
-
-#content_container h1 {
-  max-width: 95%;
-  font-variant: normal;
-  margin-top: -16px;
-  padding-bottom: 6px;
-  margin-bottom: 24px;
-  border-bottom: 1px dotted $gray_aa;
-  font-weight: 300;
-  font-size: 36px;
-  text-transform: uppercase;
-}
-
-/* headings get a tooltip showing the permalink URL, a la github jekyll */
-/* install subset of font-awesome */
-@font-face {
-  font-family: 'FontAwesome';
-  src: url('{{ site.path.style }}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.eot');
-  src: url('{{ site.path.style }}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('{{ site.path.style }}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('{{ site.path.style }}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('{{ site.path.style }}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-.fa {
-  display: inline-block;
-  font-family: FontAwesome;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.fa-link:before {
-  content: "\f0c1";
-}
-.fa-play-circle-o:before {
-  content: "\f01d";
-}
-/*
- * This code is courtesy Ben Balter, modified by Parker Moore for jekyllrb.com
- * http://ben.balter.com/2014/03/13/pages-anchor-links/
- */
-.header-link {
-  position: relative;
-  left: 0.5em;
-  opacity: 0;
-  font-size: 0.8em;
-
-/* not using -- but this is cool!
-  -webkit-transition: opacity 0.2s ease-in-out 0.1s;
-  -moz-transition: opacity 0.2s ease-in-out 0.1s;
-  -ms-transition: opacity 0.2s ease-in-out 0.1s;
-*/
-}
-h2:hover .header-link,
-h3:hover .header-link,
-h4:hover .header-link,
-h5:hover .header-link,
-h6:hover .header-link {
-  opacity: 1;
-}
-a.header-literal-anchor { display: inline !important; }
-
-/* TOOLTIPS
-   ----------------------------------------------------------------------- */
-   
-.tooltip .tooltip-inner {
-    color: $text_color;
-    background-color: $white_dd;
-    font-weight: 500;
-}
-.tooltip.top .tooltip-arrow { 
-    border-top-color: $white_dd;
-}
-.tooltip.bottom .tooltip-arrow { 
-    border-bottom-color: $white_dd;
-}
-
-/* WEBSITE MENUS
-   ----------------------------------------------------------------------- */
-
-/* top menu bar */
-.navbar-brand {
-    margin-top: -4px;
-    margin-left: -30px !important;
-}
-
-@mixin icon($name) {
-  .icon-#{$name} {
-    width: 32px;
-    height: 32px;
-    background: url('{{ site.path.style }}/img/'+$name+'-256-black.png');
-    background-size: 32px 32px;
-  }
-  .icon-#{$name}:hover {
-    background: url('{{ site.path.style }}/img/'+$name+'-256-green.png');
-    background-size: 32px 32px;
-  }
-}
-
-.navbar {
-    @include icon('github');
-    @include icon('twitter');
-    @include icon('irc');
-}
-
-.navbar .tooltip .tooltip-inner {
-    position: relative;
-    right: 40%;
-    // include calc for those browsers which support it
-    right: calc(50% - 25px);
-    max-width: 300px;
-}
-
-/* special container with sidebar where if sidebar is squeezed
-   (under "responsiveness") the text keeps at least its "auto" size,
-   squashing the main container instead */
-.container-and-sidebars {
-    width: 100%;
-    @include flex();
-}
-.container-between-sidebars {
-    -webkit-box-flex: 1 100%;
-    -webkit-flex: 1 100%;
-    -webkit-flex-flex: 1 100%;
-    flex: 1 100%;
-    flex: 10 1 100%;
-    display: inline-block;
-    width: auto;
-    margin-left: auto;
-    margin-right: auto;
-}
-.container-sidebar {
-    -webkit-box-flex: 0 auto;
-    -webkit-flex: 0 auto;
-    -webkit-flex-flex: 0 auto;
-    flex: 0 auto;
-    flex: 0 0 auto;
-}
-.container-sidebar-right { 
-    @extend .container-sidebar; 
-    text-align: left;
-    padding-right: 10px;
-} 
-.container-sidebar-left {
-    @extend .container-sidebar;
-    text-align: right;
-    padding-left: 10px;
-}
-
-@media (min-width: 768px) {
-  .container-sidebar { min-width: calc((100% - 750px)/2); }
-}
-@media (min-width: 992px) {
-  .container-sidebar { min-width: calc((100% - 970px)/2); }
-}
-@media (min-width: 1200px) {
-  .container-sidebar { min-width: calc((100% - 1170px)/2); }
-}
-
-
-.navbar-feather {
-  padding-top: 12px; 
-  margin-right: -6px;
-}
-.navbar-sidebar-right-icons {
-    padding-top: 10px;
-    margin-left: -6px;
-    white-space: nowrap;
-    a {
-      display: inline-block;
-      width: 32px;
-      height: 32px;
-    }
-}
-.navbar-icon-shift { margin-right: -2px; }
-
-.navbar div.dropdown_section_header hr {
-  margin: 4px 12px;
-  border-color: $white_dd;
-}
-
-.navbar div.dropdown_new_section hr {
-  margin: 6px 0px;
-  border-color: $white_dd;
-}
-
-/* pop-up top-menu */
-.navbar-default .navbar-nav > li > a:hover,
-.navbar-default .navbar-nav > li > a:focus,
-.navbar-default .navbar-nav > .active > a:hover,
-.navbar-default .navbar-nav > .active > a:focus {
-  background-color: $white_f5;
-  color: $brooklyn_green;
-}
-.top-menu {
-  font-size: 14px;
-  font-weight: 400;
-  .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
-    background-color: $white_f5;
-    background-image: none;
-    color: $brooklyn_green;
-  }
-  ul.nav li.dropdown:hover > ul.dropdown-menu {
-    display: block;
-  }
-}
-
-/* side menu */
-.side-menu {
-  font-family: Avenir, $fonts;
-  font-size: 14px;
-  font-weight: 400;
-  position: fixed;
-  h4.with_following {
-    margin-bottom: 0;
-  }
-  h4.with_preceding {
-    margin-top: 0;
-  }
-  h4.with_following a {
-    border-bottom-right-radius: 0 !important ;
-    border-bottom-left-radius: 0 !important ;
-    border-bottom: 0;
-  }
-  h4.with_preceding a {
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-    border-top: 0;
-  }
-  a, a.breadcrumb.breadcrumb0 { padding-left: 15px; padding-top: 8px; padding-bottom: 6px; }
-  a.breadcrumb.breadcrumb1 { padding-left: 30px; }
-  a.breadcrumb.breadcrumb2 { padding-left: 45px; }
-  a.breadcrumb.breadcrumb3 { padding-left: 60px; }
-  /* further crumbs all get the same */
-  a.breadcrumb { padding-left: 70px; }
-  
-  div.sub-item {
-    background-color: $bootstrap_theme_green_gradient_lower;
-    border-left: 1px solid $bootstrap_blue_border;
-  } 
-  div.sub-item:last-child {
-    border-bottom: 1px solid $white_dd;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-  }
-  div.sub-item:last-child a.sub-item:last-child {
-    border-bottom-right-radius: 4px !important;
-  }
-  a.with-sub-item {
-    /* border-bottom: 1px solid $white_dd; */
-    border-bottom: 0;
-  }
-  a.sub-item { 
-    border-radius: 0 !important;
-    border-bottom: 0;
-    margin-left: 12px;
-    padding-left: 10px; 
-    padding-top: 8px; 
-    padding-bottom: 8px; 
-  }
-  a.sub-item.list-group-item.active {
-    background-color: $white_f5;
-    // the below is needed to achieve the above, since bg-image is already set
-    background-image: -webkit-linear-gradient(top, $white_f5 0%, $white_f5 100%);
-    background-image: linear-gradient(to bottom, $white_f5 0%, $white_f5 100%);
-    
-    border-color: $white_dd;
-    color: $text_color;
-    text-shadow: none;
-    // not sure why the bottom border is visible at all, and stays on hover, but vanishes on 'active';
-    // but this sorts it out (taking 1 away from padding)
-    margin-bottom: 0;
-    padding-bottom: 7px;
-  }
-  a.sub-item.list-group-item.active:hover {
-    color: $a_hover_color;
-  }
-}
-
-
-/* FOOTER
-   ----------------------------------------------------------------------- */
-
-/* sticky footer */
-html {
-    position: relative;
-    min-height: 100%;
-}
-
-@media (min-width: 1200px) {
-    .slightlyNarrowContainer {
-        width: 970px;
-    }
-}
-
-div#footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    padding-top: 1em;
-    padding-bottom: 1em;
-    background-color: $white_f5;
-    text-align: center;
-    font-size: 80%;
-}
-.octicon-footer {
-    color: $footer_icon_gray;
-    font-size: 130%;
-    position: relative;
-    top: 2px;
-    padding-left: 6px;
-}
-a:hover .octicon-footer {
-    color: $brooklyn_green;
-}
-
-
-/* CODE RENDERING
-   ----------------------------------------------------------------------- */
-@mixin nowrap() {
-    white-space: pre;
-    word-wrap: normal;
-    overflow-y: scroll;
-}
-
-@mixin code() {
-    font-family: Consolas, Lucida Console, Monaco, monospace;
-    @include nowrap();
-    font-size: 14px;
-    /* override color and bg-color on 'code' from bootstrap, and a touch more padding on top since font-size is smaller */
-    color: $text_color;
-    background-color: $code_bg_color;
-}
-
-@mixin pre() {
-    @include code();
-    padding: 0.4em 0.8em;
-    overflow-x: scroll;
-    /* override border and line-height on 'pre' from bootstrap */
-    border: none;
-    border-radius: 2px;
-    line-height: 1.4;
-    font-size: 13px;
-}
-
-pre {
-    @include pre();
-    code {
-        /* override settings on 'pre code' from bootstrap */
-        @include pre();
-        line-height: 1;
-        /** and no padding since pre already has some */ 
-        padding: 0px; 
-    }
-}
-code {
-    @include code();
-    padding: 4px 4px 2px 4px;
-    border-radius: 3px;
-}
-
-.nowrap { @include nowrap(); }
-
-.highlight { background-color:$code_bg_color; } /* clipboard icon should have the same background color as the code */
-
-.highlight .clipboard_button { display: none; }
-.highlight:hover .clipboard_button { display: inherit; }
-.clipboard_button.zeroclipboard-is-hover { display: inherit; }
-
-.clipboard_container { float: right; padding: 8px; }
-.clipboard_button:before {
-  // fa-copy
-  content: "\f0c5";
-}
-.clipboard_button {
-  font-size: 18px;
-  color: $vibrant_fg_green;
-  @include transform('translateY(-2px)');
-}
-.clipboard_button:hover, .clipboard_button.zeroclipboard-is-hover {
-  color: $a_hover_color;
-  cursor: pointer; cursor: hand;
-}
-.clipboard_button.zeroclipboard-is-active .on-active {
-  display: inherit;
-}
-.clipboard_button .on-active {
-  // z-index often doesn't help here (diff stacking context to the side menu)... but it shouldn't hurt!
-  z-index: 10;
-  font-family: $fonts;
-  display: none;
-  margin-top: -20px;
-  height: 0;
-  width: 0;
-  overflow-x: visible;
-  overflow-y: visible;
-  position: relative;
-  top: -30px;
-}
-.clipboard_button .on-active > div {
-  background-color: $white_dd;
-  border: 1px solid $gray_aa;
-  font-size: 75%;
-  font-weight: normal;
-  left: -50%;
-  color: $blackish;
-  width: auto;
-  display: inline-block;
-  @include nowrap();
-  padding: 3px 7px;
-  @include transform('translateX(-50%)');
-}
-
-
-/* SEARCH
-   ----------------------------------------------------------------------- */
-
-div.search_right {
-  float: right;
-  @include transform('translateY(-12px)');
-  padding-right: 5%; 
-  padding-bottom: 18px;
-  font-size: 75%;
-  .searchform {
-    width: 240px; 
-    margin: 0; 
-    padding: 5px 5px 0 0; 
-    overflow: hidden; 
-    text-align: right;
-  }
-  .searchinput {
-    width: 227px; 
-    background: #ffffff; 
-    border: 1px solid #b1b7c2; 
-    -moz-border-radius: 2px; 
-    border-radius: 2px; 
-    color: #c8ccd5; 
-    padding: 3px;
-  }
-  .searchinput:focus {
-    color: $blackish;
-  }
-}
-
-
-/* ARCHIVE PAGE WARNING
-   ----------------------------------------------------------------------- */
-
-#page_notes {
-    display: none;
-    background-color: #4D9D3A;
-    border: 3px solid orange;
-    -moz-border-radius: 8px;
-    border-radius: 8px;
-    padding: 0.3em;
-    padding-left: 0.75em;
-    margin-top: 24px;
-    margin-bottom: -24px;
-
- div.warning {
-    background-color: #F8CB9C;
-    border: 1px solid #FFAB7C;
-    padding-left: 0.75em;
-    -moz-border-radius: 8px;
-    border-radius: 8px;
- }
- .warning_banner_image img {
-    width: 64px; padding-top: 8px; padding-right: 12px;
-    float: left;
- }
- p { line-height: 100%; color: white; }
- p.warning_banner_buttons {padding-right: 24px; } 
- p.warning_banner_buttons a, #page_notes p.warning_banner_buttons a:visited { 
-    color: orange; font-weight: bold; padding-right: 1em; text-decoration: none; }
- p.warning_banner_buttons a:hover { color: #FFC31E; font-weight: bold; }
-}
-
-
-/* LANDING PAGE
-   ----------------------------------------------------------------------- */
-
-.jumbotron {
-    margin-top: 18px;
-}
-
-#apachebrooklynbanner {
-    background-image: url("../img/apache-brooklyn-logo-817px-wide.png");
-    background-repeat: no-repeat;
-    background-position: center;
-    width: 817px;
-    height: 99px;
-    margin-bottom: 50px;
-}
-
-div.feather.landing {
-    overflow: visible;
-    max-height: 10px;
-    img {
-        width: 200px;
-        margin-left: 40px;
-        margin-top: 0px;
-    }
-}
-
-
-/* MAIN CONTAINER
-   ----------------------------------------------------------------------- */
-
-#content_container {
-  padding-bottom: 48px;
-  img {
-    max-width: 100%;
-  }
-}
-
-
-/* YAML EXPLAINED
-   ----------------------------------------------------------------------- */
-
-$explained_code_bg_color: $gray_66;
-$explained_code_fg_color: $white_dd;
-$explained_code_highlight_bg_color: $vibrant_bg_green; 
-$explained_code_highlight_fg_color: $white_fa;
-$explained_text_highlight_fg_color: $text_color;
-$explained_text_highlight_bg_color: $white_fa;
-
-$code_width: 57%;
-$annotation_width: 41%;
-
-div.annotated_blueprint {
-  margin-top: 60px;
-  div.code_scroller {
-    background-color: $code_bg_color;
-    border: 0.4em solid $explained_code_bg_color;
-    border-left: 0;
-    border-right: 0;
-    border-radius: 3px;
-    width: $code_width;
-    margin-right: 0px;
-    margin-left: auto;
-    background-color: $explained_code_bg_color;
-    color: $explained_code_fg_color;
-    overflow-x: scroll;
-    div { 
-      overflow-x: visible !important; 
-      overflow-y: visible !important; 
-    }  
-    div.code_viewer {
-      width: auto;
-      height: 100%;
-      div.block {
-        @include flex();
-        -webkit-align-items: center;
-        align-items: center;
-        z-index: -10;
-      }
-      div.block > div:last-child {
-          @include pre();
-          border: 0;
-          border-radius: 0;
-          padding: 0px 0.6em;
-          background-color: $explained_code_bg_color;
-          color: $explained_code_fg_color;
-          min-width: 100%;
-          margin-top: 3px;
-          margin-bottom: 3px;
-      }
-      div.block > div.annotations_wrapper1 {
-        font-family: $fonts;
-        div.annotations_wrapper2 {
-          // seems we have to use abs positioning because other techniques
-          // (translation, negative margins, etc) don't show up outside the scroll-x
-          position: absolute;
-          @include transform('translateX(-100%) translateY(-50%)');
-          width: $annotation_width;
-          
-          @include flex();
-          -webkit-align-items: center;
-          align-items: center;
-          div.annotations {
-            // positioning and sizing
-            height: auto;
-            width: 100%;
-            padding: 8px 8px;
-            color: $explained_text_highlight_fg_color;
-
-            div.short {
-              font-size: 125%;
-              text-align: right;
-            }
-            div.long {
-              display: none;
-              
-              font-size: 85%;
-              p { margin: 8px 0 8px 0; }
-              p:first-child { margin-top: 0; }
-              p:last-child { margin-bottom: 0; }
-            }
-          }
-          div.connector {
-            height: 7px;
-            width: 24px;
-          }
-        }
-      }
-      div.block:hover > div:last-child {
-          background-color: $explained_code_highlight_bg_color;
-          color: $explained_code_highlight_fg_color;
-          // TODO the bg color doesn't apply to regions which are only visible after a scroll-right :(
-          // to fix this i think we can us JS to set width of div.block to the width of this, the code last-child
-      }
-      div.block:hover {
-        z-index: 30 !important;
-        div.annotations_wrapper1 {
-          z-index: 30 !important;
-        }
-        div.annotations {
-          background-color: $explained_text_highlight_bg_color;
-          border: 4px solid $explained_code_highlight_bg_color;
-          border-radius: 8px;
-          text-align: center; 
-          div.short {
-            font-size: 100% !important;
-            text-align: center !important;
-            color: $text_color;
-            margin-bottom: 8px;
-            font-weight: bold; 
-            z-index: 10;
-          }
-          div.long { display: inherit !important; }
-        }
-        div.connector {
-          background-color: $explained_code_highlight_bg_color;
-        }
-      }
-      // highlighting of key code segments
-      div.block > div:last-child .ann_highlight { 
-        font-weight: bold; 
-        color: #e8f0e0; 
-      }
-      div.block:hover > div:last-child .ann_highlight { 
-        color: #f8fff8; 
-      }
-    }
-  }
-  div.code_viewer:hover {
-    div.annotations div.short {
-      color: $gray_aa;
-    }
-  }
-  
-  // have an initial notice
-  div.code_scroller {
-    div.initial_notice {
-      height: 0;
-      width: 0;
-      overflow-x: visible;
-      overflow-y: visible;
-    }
-    div.initial_notice > div {
-      z-index: 10;
-      background-color: transparentize($gray_aa, 0.1);
-      position: relative;
-      width: 0;
-      height: 0;
-      @include flex();
-      -webkit-align-items: top;
-      align-items: top;
-    }
-    div.initial_notice > div > div {
-      padding-top: 24px;
-      font-size: 125%;
-      font-weight: bold;
-      text-align: center;
-      width: 100%;
-      .ann_light {
-        padding-top: 12px;
-        font-weight: 300;
-      }
-      .ann_play {
-        display: block;
-        padding-top: 24px;
-        padding-bottom: 24px;
-        font-size: 600%;
-      }
-    }
-  }
-  div.code_scroller:hover div.initial_notice {
-    display: none;
-  }
-}

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/guide-toc.css
----------------------------------------------------------------------
diff --git a/docs/style/css/guide-toc.css b/docs/style/css/guide-toc.css
deleted file mode 100644
index be38a11..0000000
--- a/docs/style/css/guide-toc.css
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *  http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
-*/
-
-
-#sidebar_toc { padding-top: 6px; }
-#sidebar_toc a { text-decoration: none; }
-
-#sidebar_toc div.toc-1 { padding: 8px; margin: 4px 0px 0px 0px; }
-#sidebar_toc div.toc-1-item {text-transform: uppercase; font-size: 12px; color: #111111; margin: 15px 0 5px 0;}
-#sidebar_toc div.toc-1-item.toc-1-header { margin: 0px 0px 2px 0px; }
-#sidebar_toc div.toc-1-item:hover { color: #003800; }
-
-#sidebar_toc div.toc-2-item { color: #282; padding-top: 3px; }
-#sidebar_toc div.toc-2-item:hover { color: #010; }
-
-#sidebar_toc div.toc-1.toc-active { background: #C6D0D8; border-radius: 5px; }
-#sidebar_toc div.toc-1.toc-active div.toc-1-item { color: #222; }
-#sidebar_toc div.toc-2.toc-active div.toc-2-item { font-weight: bold; }
-#sidebar_toc div.toc-3.toc-active div.toc-3-item { font-weight: bold; }
-
-/* level 3 menu is displayed in the list, indented, if parent is active */
-#sidebar_toc div.toc-2.toc-active div.toc-2-children { margin: 2px 0px 3px 0px; } 
-#sidebar_toc div.toc-2.toc-active div.toc-3-item { 
-    padding: 1px 0px 1px 12px;
-}
-#sidebar_toc div.toc-2.toc-active div.toc-3-item:hover { color: #060; }
-
-/* otherwise level 3 menu is popup */
-#sidebar_toc div.toc-2:not(.toc-active) div.toc-3-item { color: #262; background: #C6D0D8;
-    text-align: right; padding: 2px 6px 2px 6px;
-    border-width: 1px; border-style: solid; border-radius: 0px; border-color: #464;
-}
-#sidebar_toc div.toc-2:not(.toc-active) div.toc-3-item:hover { color: #030; border-color: #353; background: #e8eded; }
-
-#sidebar_toc div.toc-2:not(.toc-active) div.toc-2-children-popup { 
-    display: none;
-}
-#sidebar_toc div.toc-2:not(.toc-active):hover div.toc-2-children-popup { 
-    display: block;
-    position: relative;
-    height: 0px;
-/*  right: -180px; to make appear at right */
-    left: -158px;
-    width: 180px;
-    top: -17px;
-}
-#sidebar_toc div.toc-2:not(.toc-active) div.toc-2-children { 
-    display: block;
-    width: 160px;
-    padding: 0px 10px 0px 10px;
-}
-
-/* old 
-.ui-accordion { font-size: 90% }
-.ui-accordion .left-menu-body {
-	padding: 0;
-	overflow:hidden;
-}
-.ui-accordion .toc1 { margin: 14px 0px 0px 0px; }
-
-#sidebar_toc .toc1 { background: #f8f8f8; }
-#sidebar_toc .toc2 { background: #f0f0f0; }
-#sidebar_toc .toc3 { background: #e8e8e8; padding: 0px 0px 0px 20px; }
-
-#sidebar_toc .ui-accordion-header-active { background: #d8d8d8; }
-
-#sidebar_toc .toc-active { background: #68aa70; }
-#sidebar_toc .toc-active a { color: #103010; }
-
-#sidebar_toc .ui-state-hover { background: #c8d0c8; }
-*/
-

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/guide.css
----------------------------------------------------------------------
diff --git a/docs/style/css/guide.css b/docs/style/css/guide.css
deleted file mode 100644
index 6cfa2d0..0000000
--- a/docs/style/css/guide.css
+++ /dev/null
@@ -1,119 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *  http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
-*/
-/*
-Brooklyn minisite
-*/
-
-/*ACCESSIBILITY*/
-#shortcuts {display: block; position: absolute; top: -100px; z-index: 0} 
-#shortcuts a {padding: 0 0.5em; left: 0; z-index: 0}
-#shortcuts a:focus, #shortcuts a:active {display: inline; z-index: 2; background-color: #ffff00; color: #000000; text-decoration: none; position: absolute; top: 100px;}
-
-/* STRUCTURE */
-#container {width: 980px; padding: 0; margin: 0 auto;}
-#contentcontainer {clear: both; width: 980px; overflow: hidden;}
-#maincontent {width: 710px; float: left; padding: 10px 0px 25px 10px; background-color: #ffffff;}
-#sidebar {width: 155px; float: right; background: #ffffff url(../img/bridge.png) no-repeat 0 12px; padding: 112px 5px 20px 0;}
-
-/* HEADER */
-#header {padding: 0;}
-#identity {float: left; margin: 0; padding: 30px 0 15px 10px;}
-#identity a {text-decoration: none; display: block; margin: 0; color: #4d9d3a; font-size: 2.5em; padding: 0; background: transparent url(../img/brooklyn.gif) no-repeat 0 0; width: 206px; height: 44px; text-indent: -1000px; overflow: hidden;}
-.searchform {float: right; width: 160px; margin: 0; padding: 5px 5px 0 0; overflow: hidden; text-align: right;}
-.searchinput {
-  width: 147px; 
-  padding: 3px;
-  color: #c8ccd5; 
-  background: #ffffff; 
-  border: 1px solid #b1b7c2; 
-  -moz-border-radius: 5px; border-radius: 5px; 
-  font: -webkit-small-control;
-}
-.searchinput:focus {color: #333333;}
-
-/*MENUS*/
-#header #quicklinks {float: right; list-style: none; margin: 0; padding: 0 10px 0 0;}
-#header #quicklinks li {margin: 0; padding: 0 5px 0 7px; text-transform: uppercase; font-size: 10px; float: left; background: #ffffff url(../img/divider-quicklinks.gif) no-repeat left center;}
-#header #quicklinks li:first-child {background-image: none;}
-#header #quicklinks a {text-decoration: none; color: #4f8243;}
-#menubar  {clear: both; width: 978px; height: 36px; background-color: #e8eded; border: 1px solid #d5dade;  -moz-border-radius: 8px; border-radius: 8px;}
-#mainmenu {list-style: none; margin: 0; padding: 4px 0 0 2px; width: 765px; display: block; float: left; font-size: 15px;}
-#mainmenu li {float: left; position: relative; margin: 0; padding: 0; }
-#mainmenu>li {border: 1px solid transparent; border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-bottom: 0;}
-#mainmenu a {display: block; text-decoration: none; color: #508243;}
-#mainmenu>li>a {padding: 0 8px 5px 8px; line-height: 25px;}
-#mainmenu>li:hover {background-color: #ffffff; border: 1px solid #dbe0e4; border-bottom: 0;}
-#mainmenu .current a {color: #838a8b;}
-#mainmenu ul {display: none; position: absolute; top: 30px; left: -1px; float: left; background-color: #f5f5f5; border: 1px solid #dbe0e4; border-top: 0; list-style: none; margin: 0; padding: 5px; width: 185px;}
-#mainmenu ul ul {left: 100%; margin-left: 6px; top: -1px; border-top: 1px solid #dbe0e4;}
-#mainmenu ul li {width: 183px; padding: 0; border: 1px solid transparent;}
-#mainmenu ul li:hover {border: 1px solid #dbe0e4; background-color: #ffffff;}
-#mainmenu ul a {font-size: 14px; padding: 7px;}
-#mainmenu li:hover > ul, #mainmenu li.sfHover > ul {display: block;}
-
-/* MAIN CONTENT */
-#breadcrumb {font-size: 12px; margin: 0 0 2em 0; color: #636363;}
-#breadcrumb a {color: #636363; text-decoration: none;}
-#breadcrumb a:hover {color: #636363; text-decoration: underline;}
-#breadcrumb span {color: #9e9e9e;}
-#maincontent ul {margin: 0.75em 0; padding: 0 0 0 25px;}
-#maincontent li {line-height: 1.5em; margin: 0 0 0.25em 0; padding: 0;}
-table {width: 100%; border: 1px solid #dbe0e4; border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px;}
-th, td {text-align: center; padding: 5px;}
-th {background-color: #f2f3f5; font-weight: bold; color: #121212; border-right: 1px solid #dbe0e4;}
-td {border-top: 1px solid #dbe0e4; border-right: 1px solid #dbe0e4; padding: 5px;}
-th:last-child, td:last-child {border-right: 0;}
-
-/* PAGE ELEMENTS */
-div.warning{
-	background-color: #F8CB9C;
-	border: 1px solid #FFAB7C;
-	padding-left: 0.75em;
-	-moz-border-radius: 8px;
-	border-radius: 8px;
-}
-#page_notes{
-	display: none;
-	background-color: #4D9D3A;
-	border: 3px solid orange;
-	-moz-border-radius: 8px;
-	border-radius: 8px;
-	padding: 0.3em;
-	padding-left: 0.75em;
-	margin-top: -0.5em;
-	margin-bottom: 1em;
-}
-#page_notes .warning_banner_image img {
-    width: 64px; padding-top: 8px; padding-right: 12px;
-    float: left;
-}
-#page_notes p { line-height: 100%; color: white; }
-#page_notes p.warning_banner_buttons {padding-right: 24px; } 
-#page_notes p.warning_banner_buttons a, #page_notes p.warning_banner_buttons a:visited { 
-	color: orange; font-weight: bold; padding-right: 1em; text-decoration: none; }
-#page_notes p.warning_banner_buttons a:hover { color: #FFC31E; font-weight: bold; }
-
-
-/* SIDEBAR */
-#sidebar {font-size: 13px;}
-#sidebar h2 {text-transform: uppercase; font-size: 12px; color: #111111; margin: 15px 0 5px 0;}
-#sidebar ul {list-style: none; margin: 0; padding: 0;}
-#sidebar li {margin: 0 0 5px; padding: 0;}
-#sidebar li a {text-decoration: none;}
-#sidebar li a:hover {text-decoration: underline;}

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/javadoc.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/javadoc.scss b/docs/style/css/javadoc.scss
new file mode 100644
index 0000000..204c8a9
--- /dev/null
+++ b/docs/style/css/javadoc.scss
@@ -0,0 +1,119 @@
+---
+---
+
+{% include base-scss.scss %}
+
+@import 'util';
+@import 'basic';
+@import 'tooltips';
+@import 'code_blocks';
+
+body {
+  padding: 0;
+  font-size: 100%;
+}
+
+.title { color: $blackish; }
+
+a, a:link, a:visited { color: $a_color; }
+a:hover, a:link:hover, a:visited:hover { color: $a_hover_color; }
+
+.indexContainer, td {
+  a, a:link, a:visited { color: darken($a_color, 20%); }
+}
+
+
+.topNav, .bottomNav, .bar {
+  background-image: -webkit-linear-gradient(top, darken($bootstrap_theme_green_gradient_upper, 10%) 0%, darken($bootstrap_theme_green_gradient_lower, 10%) 100%);
+  background-image: linear-gradient(to bottom, darken($bootstrap_theme_green_gradient_upper, 10%) 0%, darken($bootstrap_theme_green_gradient_lower, 10%) 100%);
+  a:hover, a:link:hover, a:visited:hover { color: lighten($a_hover_color, 10%); }
+}
+
+.topNav {
+  height: inherit;
+  padding-bottom: 6px;
+}
+.topNav .aboutLanguage .brooklyn-header {
+  font-family: $header_fonts;
+  font-weight: bold;
+  font-size: 140%;
+  img { margin-top: 8px; }
+}
+.bar .brooklyn-header .img {
+  display: none;
+}
+.brooklyn-header .img {
+  background-image: url('feather.png');
+  background-size: contain;
+  width: 50px; 
+  height: 15px;
+  margin-left: 8px;
+  margin-top: 8px;
+  display: inline-block;
+} 
+
+.bottomNav .aboutLanguage {
+  margin-top: 0;
+}
+
+.subNav div {
+  padding: 0;
+}
+
+// sub-nav items seem to need extra indent
+ul.subNavList li:first-child {
+  padding-left: 6px;
+}
+ul.subNavList li {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+// there is so much code we don't want special treatment for it
+code {
+  font-size: 100%;
+  background-color: inherit;
+  padding: 0;
+  word-wrap: normal;
+  whitespace: inherit;
+}
+
+// tabs
+.overviewSummary caption span, .packageSummary caption span, .contentContainer ul.blockList li.blockList caption span, .summary caption span, .classUseContainer caption span, .constantValuesContainer caption span {
+  padding-top: 5px;
+  padding-bottom: 3px;
+}
+.overviewSummary .tabEnd, .packageSummary .tabEnd, .contentContainer ul.blockList li.blockList .tabEnd, .summary .tabEnd, .classUseContainer .tabEnd, .constantValuesContainer .tabEnd {
+  width: 0;
+}
+
+// package
+.subTitle {
+  margin-bottom: -6px;
+  font-family: $header_fonts;
+  font-weight: normal;
+  font-style: italic;
+  font-size: 125%;
+}
+.subTitle .block {
+  margin-top: 6px;
+  margin-bottom: 24px;
+  font-style: normal;
+  
+  p {
+    font-family: $fonts; 
+    font-style: normal;
+    font-weight: 300;
+    font-size: 90%;
+  }
+}
+.footer .subTitle .block {
+  margin-top: 18px;
+  font-weight: bold;
+  p {
+    font-weight: 300;
+  }
+}
+.header .subTitle .block {
+  font-weight: 300;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/310c4148/docs/style/css/website.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/website.scss b/docs/style/css/website.scss
new file mode 100644
index 0000000..e855ec6
--- /dev/null
+++ b/docs/style/css/website.scss
@@ -0,0 +1,19 @@
+---
+---
+
+{% include base-scss.scss %}
+
+$style_dir: {{ site.path.style }};
+
+@import 'util';
+@import 'basic';
+@import 'tooltips';
+@import 'code_blocks';
+@import 'menu';
+@import 'search';
+@import 'footer';
+@import 'main_container';
+
+@import 'archive_warning';
+@import 'landing';
+@import 'blueprint_tour';


Mime
View raw message