kalei 0.0.1

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2012 YOURNAME
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,34 @@
+# Kalei - a living styleguide for your Ruby project
+
+This gem provides an easy way to add the Kalei Styleguide to your existing Ruby application.
+
+## Rails Installation
+
+**Step 1:** Add kalei to your `Gemfile`:
+
+    gem 'kalei', :require => 'kalei/engine'
+
+**Step 2:** Add kalei to your `config/routes.rb`:
+
+    Rails.application.routes.draw do
+      mount Kalei::Engine => "/style-guide"
+    end
+
+Kalei will now be available in the browser at `/style-guide`. By default, it will parse your stylesheet at `/assets/application.css`. More configuration options coming soon.
+
+
+## Non-Rails Installation
+
+**Step 1:** Add kalei to your `Gemfile`:
+
+    gem 'kalei'
+
+**Step 2:** Add kalei to your `config.ru`:
+
+    require 'kalei/app'
+
+    map '/style-guide' do
+      run Kalei::App
+    end
+
+Kalei will now be available in the browser at `/style-guide`. By default, it will parse your stylesheet at `/assets/application.css`, which may not be correct for your application. More configuration options coming soon.

data/Rakefile

@@ -0,0 +1,39 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+# begin
+#   require 'rdoc/task'
+# rescue LoadError
+#   require 'rdoc/rdoc'
+#   require 'rake/rdoctask'
+#   RDoc::Task = Rake::RDocTask
+# end
+
+# RDoc::Task.new(:rdoc) do |rdoc|
+#   rdoc.rdoc_dir = 'rdoc'
+#   rdoc.title    = 'Kalei'
+#   rdoc.options << '--line-numbers'
+#   rdoc.rdoc_files.include('README.rdoc')
+#   rdoc.rdoc_files.include('lib/**/*.rb')
+# end
+
+
+
+
+Bundler::GemHelper.install_tasks
+
+# require 'rake/testtask'
+
+# Rake::TestTask.new(:test) do |t|
+#   t.libs << 'lib'
+#   t.libs << 'test'
+#   t.pattern = 'test/**/*_test.rb'
+#   t.verbose = false
+# end
+
+
+# task :default => :test

data/lib/kalei.rb

@@ -0,0 +1,3 @@
+module Kalei
+	VERSION = "0.0.1"
+end

data/lib/kalei/app.rb

@@ -0,0 +1,9 @@
+require 'sinatra/base'
+
+module Kalei
+	class App < Sinatra::Base
+		get '/' do
+			erb :index
+		end
+	end
+end

data/lib/kalei/engine.rb

@@ -0,0 +1,7 @@
+require 'kalei/app'
+
+module Kalei
+  class Engine < ::Rails::Engine
+    endpoint Kalei::App
+  end
+end

data/lib/kalei/public/css/buttons.css

@@ -0,0 +1,251 @@
+/*
+# Example Button Stylesheet 
+
+This is an example button set taken from [Red Team Design](http://www.red-team-design.com/just-another-awesome-css3-buttons).
+
+
+```
+<h2>Actions</h2>
+<a href="" class="button">Button</a>
+<a href="" class="button add">Add</a>
+<a href="" class="button edit">Edit</a>
+<a href="" class="button delete">Delete</a>
+<a href="" class="button save">Save</a>
+<a href="" class="button email">Send email</a>
+
+<br><br>
+
+<h2>Miscellaneous</h2>
+<a href="" class="button like">Like</a>
+<a href="" class="button next">Next</a>
+<a href="" class="button star">Favourite</a>
+<a href="" class="button spark">Spark</a>
+<a href="" class="button play">Play</a>
+
+<br><br>
+
+<h2>Social media buttons</h2>
+
+<a href="http://twitter.com/catalinred" class="button tw">Follow me</a>
+<a href="http://www.facebook.com/RedTeamDesign" class="button fb">Become a fan</a>
+
+
+<h2>Buttons and inputs</h2>
+
+<button class="button">Clean button</button>
+<button class="button save">Button with icon</button>
+<button class="button" disabled>Disabled button</button>
+<button class="button save" disabled>Another disabled button</button>
+
+<br>
+<input class="button" type="submit" value="Input submit">
+<input class="button" type="button" value="Input button">
+<input class="button" type="submit" value="Input submit disabled" disabled>
+<input class="button" type="button" value="Input button disabled" disabled>
+```
+*/
+.button
+    {        
+        display: inline-block;
+        white-space: nowrap;
+        background-color: #ddd;
+        background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
+        background-image: -webkit-linear-gradient(top, #eee, #ccc);
+        background-image: -moz-linear-gradient(top, #eee, #ccc);
+        background-image: -ms-linear-gradient(top, #eee, #ccc);
+        background-image: -o-linear-gradient(top, #eee, #ccc);
+        background-image: linear-gradient(top, #eee, #ccc);
+        border: 1px solid #777;
+        padding: 0 1.5em;
+        margin: 0.5em;
+        font: bold 1em/2em Arial, Helvetica;
+        text-decoration: none;
+        color: #333;
+        text-shadow: 0 1px 0 rgba(255,255,255,.8);
+        -moz-border-radius: .2em;
+        -webkit-border-radius: .2em;
+        border-radius: .2em;
+        -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
+        -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
+        box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
+    }
+    
+    .button:hover
+    {
+        background-color: #eee;        
+        background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
+        background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
+        background-image: -moz-linear-gradient(top, #fafafa, #ddd);
+        background-image: -ms-linear-gradient(top, #fafafa, #ddd);
+        background-image: -o-linear-gradient(top, #fafafa, #ddd);
+        background-image: linear-gradient(top, #fafafa, #ddd);
+    }
+    
+    .button:active
+    {
+        -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
+        -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
+        box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
+        position: relative;
+        top: 1px;
+    }
+    
+    .button:focus
+    {
+        outline: 0;
+        background: #fafafa;
+    }    
+    
+    .button:before
+    {
+        background: #ccc;
+        background: rgba(0,0,0,.1);
+        float: left;        
+        width: 1em;
+        text-align: center;
+        font-size: 1.5em;
+        margin: 0 1em 0 -1em;
+        padding: 0 .2em;
+        -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
+        -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
+        box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
+        -moz-border-radius: .15em 0 0 .15em;
+        -webkit-border-radius: .15em 0 0 .15em;
+        border-radius: .15em 0 0 .15em;     
+        pointer-events: none;		
+    }
+	
+	
+	button.button, input.button 
+	{ 
+		cursor: pointer;
+		overflow: visible; 
+	}
+	
+	button::-moz-focus-inner 
+	{
+	  border: 0;
+	  padding: 0;
+	}
+	
+	 input::-moz-focus-inner 
+	{
+	  padding: .4em;
+	}
+
+	.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover 
+	{
+		background: #eee;
+		color: #aaa;
+		border-color: #aaa;
+		cursor: default;
+		text-shadow: none;
+		position: static;
+		-moz-box-shadow: none;
+		-webkit-box-shadow: none;
+		box-shadow: none;		
+	}
+    
+    
+    .add:before
+    {
+        content: "\271A";
+    }
+    
+    .edit:before
+    {
+        content: "\270E";        
+    }
+    
+    .delete:before
+    {
+        content: "\2718";        
+    }
+    
+    .save:before
+    {
+        content: "\2714";        
+    }
+    
+    .email:before
+    {
+        content: "\2709";        
+    }
+    
+    .like:before
+    {
+        content: "\2764";        
+    }
+    
+    .next:before
+    {
+        content: "\279C";
+    }
+    
+    .star:before
+    {
+        content: "\2605";
+    }
+    
+    .spark:before
+    {
+        content: "\2737";
+    }
+    
+    .play:before
+    {
+        content: "\25B6";
+    }
+
+
+	.tw, .fb,
+	.tw:hover, .fb:hover
+	{
+        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
+        background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
+        background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
+        background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
+        background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
+        background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
+	}
+
+	.tw, .tw:focus
+	{
+	  background-color: #88E1E6;
+	}
+	
+	.fb, .fb:focus
+	{
+	  background-color: #3C5A98;
+	  color: #fff;	  
+	  text-shadow: 0 1px 0 rgba(0,0,0,.4);		
+	}
+
+	.tw:hover
+	{
+	  background-color: #b1f0f3;
+	}
+	
+	.fb:hover
+	{
+	  background-color: #879bc3; 
+	}
+	
+    .tw:before
+    {
+        content: "t";
+        background: #91cfd3;
+        background: rgba(0,0,0,.1);		
+		color: #fff;
+		font-family: verdana;
+		text-shadow: 0 1px 0 rgba(0,0,0,.4);
+    }
+    
+    .fb:before
+    {
+        content: "f";
+        background: #4467ac;
+        background: rgba(0,0,0,.1);		
+		color: #fff;	
+		text-shadow: 0 1px 0 rgba(0,0,0,.4);
+    }

data/lib/kalei/public/css/demo-styleDoccos.css

@@ -0,0 +1,360 @@
+/*
+StyleDocco default styles
+=========================
+This is the default stylesheet for StyleDocco. It also serves as an example of the documentation syntax. */
+
+/*
+General styles
+--------------
+We don't define any global styles except background color and resetting margins and paddings. */
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #f6f7f9;
+}
+/* We use the generic `sans-serif` font family to get Arial on Windows and Helvetica on Mac, but elements in the example boxes will not get any of StyleDocco styles.
+
+    <a href="#">Unstyled link example</a> */
+.styledocco-sidebar,
+.styledocco-docs > :not(.styledocco-example) {
+    margin: 15px 20px;
+    color: #334;
+    line-height: 1.618;
+    font-family: sans-serif;
+    -webkit-font-smoothing: subpixel-antialiased;
+}
+.styledocco-sidebar,
+.styledocco-docs > p, .styledocco-docs > ul, .styledocco-docs > ol, .styledocco-docs > a {
+    font-size: 12px;
+}
+.styledocco-docs > h1, .styledocco-docs > h2, .styledocco-docs > h3,
+.styledocco-docs > h4, .styledocco-docs > h5, .styledocco-docs > h6 {
+     /* `!important` needed due to `*:not()` above. */
+    margin: 25px 20px 0 !important;
+    line-height: 1.2 !important;
+    color: #555f6a !important;
+}
+.styledocco-docs > :not(.styledocco-example) a {
+    color: #27a;
+    text-decoration: none;
+}
+.styledocco-docs > :not(.styledocco-example) a:hover {
+    color: #157;
+    text-decoration: underline;
+}
+.styledocco-docs > :not(.styledocco-example) a:visited {
+    color: #146;
+}
+/* Manually adding the documentation container makes examples possible in the StyleDocco documentation. You won't need that in your stylesheet documentation, of course.
+
+    <div class="styledocco-docs">
+      <p>A <a href="#">regular link</a> (now styled), a <a href="./docs.html">visited link</a> and some <code>inline code</code>.</p>
+    </div>
+
+To show pseudo selectors styles in examples, just add the pseudo selector (including the `:`) as a class name.
+
+    <div class="styledocco-docs"><p>
+      <a href="#">Link</a>
+      <a href="#" class=":hover">Link</a>
+      <a href="#" class=":visited">Link</a>
+    </div> */
+.styledocco-docs > :not(.styledocco-example):not(pre) var,
+.styledocco-docs > :not(.styledocco-example):not(pre) code {
+    padding: .1em 3px;
+    background: rgba(0, 0, 0, .025);
+    border: 1px solid rgba(0, 0, 0, .05);
+    border-radius: 3px;
+    font-style: normal;
+    font-family: "Ubuntu Mono", "Andale Mono", "DejaVu Sans Mono", "Monaco", "Bitstream Vera Sans Mono", "Consolas", "Lucida Console", monospace;
+}
+/* For displaying code, we prefer [Ubuntu Mono](http://font.ubuntu.com.com), falling back on some fonts that should look better at smaller sizes than the default monospace fonts.
+
+Code blocks also get a nice selection color to better highlight what you should select when copy/pasting.
+
+```
+<div class="styledocco-docs">
+<pre>
+<code>The font in &lt;pre&gt; code blocks is small but legible.</code>
+</pre>
+</div>
+``` */
+.styledocco-code pre code,
+.styledocco-docs > pre samp,
+.styledocco-docs > pre code {
+    padding: 0;
+    background: transparent;
+    border: 0;
+    font-family: "Ubuntu Mono", "Andale Mono", "DejaVu Sans Mono", "Monaco", "Bitstream Vera Sans Mono", "Consolas", "Lucida Console", monospace;
+    font-size: 12px;
+}
+.styledocco-code code::selection,
+.styledocco-docs > pre code::selection {
+    background: #248;
+    color: #fff;
+}
+
+/* ## Site Layout ##
+A centered container with sections of documentation and code side by side, and a menu (not displayed here). The code pane is slightly faded out until hovered.
+
+    <div class="styledocco-container">
+      <div class="styledocco-section">
+        <div class="styledocco-docs"><p>Documentation</p></div>
+        <div class="styledocco-code"><pre>Code</pre></div>
+      </div>
+    </div> */
+.styledocco-container {
+    width: 95%;
+    max-width: 1500px;
+    margin: 0 auto;
+}
+.styledocco-main {
+    float: right;
+    width: 83%;
+}
+.styledocco-sidebar {
+    position: fixed;
+    width: 9%;
+    padding: 1%;
+}
+.styledocco-section {
+    position: relative;
+    min-height: 200px;
+}
+
+/* ## Menu ##
+Sidebar menu, fixed top/left. Slightly faded out when not hovered.
+
+    <div class="styledocco-sidebar :hover" style="position:static;width:40%">
+      <a href="#" class="styledocco-brand">Hovered sidebar</a>
+      <strong class="styledocco-nav-heading">Folder</strong>
+      <ul class="styledocco-nav">
+        <li><a href="#">Item</a>
+        <li class=":hover"><a href="#">Hovered item</a>
+      </ul>
+    </div>
+    <div class="styledocco-sidebar" style="position:static;width:40%">
+      <a href="#" class="styledocco-brand">Inactive menu</a>
+      <ul class="styledocco-nav">
+        <li><a href="#">Item</a>
+      </ul>
+    </div>
+
+Sometimes you need to specify some inline styles in the HTML examples to override properties such as `position: fixed`. */
+.styledocco-sidebar {
+    max-height: 90%;
+    overflow-y: auto;
+    margin-top: 20px;
+    word-wrap: break-word;
+    background-color: #777f88;
+    border-radius: 5px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
+    opacity: .75;
+    -webkit-transition: opacity 2.5s;
+    -moz-transition:    opacity 2.5s;
+    -o-transition:      opacity 2.5s;
+}
+.styledocco-sidebar:hover {
+    opacity: 1;
+    -webkit-transition: opacity .5s;
+    -moz-transition:    opacity .5s;
+    -o-transition:      opacity .5s;
+}
+.styledocco-sidebar a {
+    text-decoration: none;
+}
+.styledocco-brand {
+    display: block;
+    margin: 0 0 10px;
+    text-align: center;
+    color: #eee;
+    font-size: 16px;
+    font-weight: bold;
+    text-shadow: rgba(0, 0, 0, .5) 0 0 1px;
+}
+.styledocco-brand:hover {
+    color: #fff;
+    text-decoration: none;
+}
+.styledocco-nav {
+    margin: 0;
+    padding: 0;
+}
+.styledocco-nav-heading {
+    display: block;
+    padding: .3em 0;
+    margin: .5em 0 0;
+    color: #ddd;
+    font-size: 13px;
+    text-shadow: rgba(0, 0, 0, .25) 0 0 1px;
+}
+.styledocco-nav li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-top: 1px solid rgba(255, 255, 255, .1);
+}
+.styledocco-nav li:active,
+.styledocco-nav li:focus,
+.styledocco-nav li:hover {
+    background: rgba(255, 255, 255, .2);
+    border-color: transparent;
+    border-radius: 3px;
+    text-decoration: none;
+}
+.styledocco-nav li:active + li,
+.styledocco-nav li:focus + li,
+.styledocco-nav li:hover + li {
+    border-color: transparent;
+}
+.styledocco-nav a {
+    display: block;
+    padding: .2em 5%;
+    color: #f7f7f7;
+}
+
+/* ## Documentation & code ## */
+.styledocco-docs {
+    position: relative;
+    width: 58%;
+    min-height: 200px;
+    margin: 20px 0 40px;
+    background: #fff;
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 0, 0, .1);
+    border-radius: 5px;
+    box-shadow: 0 0 3px rgba(0, 0, 0, .1);
+}
+.styledocco-code {
+    position: absolute;
+    top: 5px; bottom: 5px;
+    right: 0;
+    width: 42%;
+    overflow: auto;
+    padding: 10px;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    border-radius: 0 5px 5px 0;
+    border: 1px solid rgba(0, 0, 0, .1);
+    background: rgba(255, 255, 255, .75);
+    opacity: .75;
+    -webkit-transition: opacity .25s;
+    -moz-transition:    opacity .25s;
+    -o-transition:      opacity .25s;
+}
+.styledocco-code:hover {
+    opacity: 1;
+}
+/* Showing examples of documentation examples would be a bit recursive, but it's a checkerboard background to be able to see edges of elements regardless of their color. */
+.styledocco-example {
+    margin-top: 10px;
+    padding: 15px;
+    overflow: auto;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAAXNSR0IArs4c6QAAAAZQTFRF+vr6////+o8bnQAAABBJREFUCB1jYPjPgBXhEAYAfr8P8bm+jEoAAAAASUVORK5CYII=);
+    border-top: 1px dotted rgb(220, 220, 225);
+}
+pre + .styledocco-example {
+    margin-top: 0;
+    border-top: 0;
+}
+.styledocco-example:before, .styledocco-example:after { display: table; content: ""; }
+.styledocco-example:after { clear: both; }
+
+.styledocco-docs > pre,
+.styledocco-code pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    color: #445;
+    margin: 0 !important;
+    line-height: 1.1 !important;
+}
+.styledocco-docs > .pilcrow {
+    position: absolute;
+    right: 0; top: 0;
+    text-decoration: none;
+    font-weight: bold;
+    opacity: .5;
+}
+.styledocco-docs > .pilcrow:hover {
+    opacity: 1;
+}
+.styledocco-docs > pre {
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 10px 20px;
+    background: rgb(248, 249, 251);
+    border: 1px solid rgba(220, 220, 225, .8);
+    border-left: 0; border-right: 0;
+}
+.styledocco-example + pre {
+    border-top: 1px dotted rgb(220, 220, 225);
+}
+.styledocco-docs > pre:first-child {
+    border-top: 0;
+}
+.styledocco-docs > pre:last-child {
+    border-bottom: 0;
+}
+.styledocco-code pre {
+    padding: 0;
+    background: transparent;
+    border: 0;
+}
+
+/* ### Code highlighting
+The code highlighting color scheme is based on GitHub's code colors, but slightly muted and modified to support more CSS features. */
+/* ```
+<div class="styledocco-docs"><pre><code><span class="comment">// A comment</span>
+<span class="tag">body</span>, <span class="id">#foo</span>, <span class="class">.bar</span> <span class="rules">{
+  <span class="rule"><span class="attribute">property</span>:<span class="value"> <span class="function">foo(<span class="number">99</span>px</span>)</span> <span class="important">!important</span>;</span>
+  <span class="rule"><span class="attribute">content</span>:<span class="value"> <span class="string">'hi'</span></span>;</span>
+}</span>
+<span class="tag">&lt;tag <span class="attribute">attribute</span>=<span class="value">"value"</span>></span>string<span class="tag">&lt;/tag></span>
+</code></pre></div>
+``` */
+.styledocco-code .comment, .styledocco-docs > pre .comment {
+    color: #887;
+}
+.styledocco-code .number, .styledocco-docs > pre .number,
+.styledocco-code .hexcolor, .styledocco-docs > pre .hexcolor {
+    color: #497;
+}
+.styledocco-code .important, .styledocco-docs > pre .important,
+.styledocco-code .string, .styledocco-docs > pre .string,
+.styledocco-code .tag .value, .styledocco-docs > pre .tag .value {
+    color: #b35;
+}
+.styledocco-code .tag, .styledocco-docs > pre .tag,
+.styledocco-code .tag .title, .styledocco-docs > pre .tag .title {
+    color: #348;
+}
+.styledocco-code .attribute, .styledocco-docs > pre .attribute,
+.styledocco-code .variable, .styledocco-docs > pre .variable,
+.styledocco-docs > :not(.styledocco-example):not(pre) var {
+     color: #188;
+}
+.styledocco-code .pseudo, .styledocco-docs > pre .pseudo,
+.styledocco-code .keyword, .styledocco-docs > pre .keyword,
+.styledocco-code .rule .attribute, .styledocco-docs > pre .rule .attribute {
+    color: #001;
+}
+.styledocco-code .at_rule, .styledocco-docs > pre .at_rule,
+.styledocco-code .at_rule .keyword, .styledocco-docs > pre .at_rule .keyword,
+.styledocco-code .id, .styledocco-docs > pre .id {
+    color: #724;
+}
+.styledocco-code .function, .styledocco-docs > pre .function,
+.styledocco-code .class, .styledocco-docs > pre .class {
+    color: #328;
+}
+
+.styledocco-example .styledocco-section,
+.styledocco-example .styledocco-docs {
+    min-height: 0;
+    margin: 0;
+}
+
+.styledocco-example .styledocco-section,
+.styledocco-example .styledocco-docs {
+    min-height: 0;
+    margin: 0;
+}}