diff --git a/Gruntfile.js b/Gruntfile.js
index e8e7f23..333bd3c 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -73,6 +73,7 @@
           '<%= meta.src.css_soc_dir %>/search_page.css': '<%= meta.src.less_soc_dir %>/search_page.less',
           '<%= meta.src.css_soc_dir %>/server-error-style.css': '<%= meta.src.less_soc_dir %>/server-error-style.less',
           '<%= meta.src.css_soc_dir %>/user-error-style.css': '<%= meta.src.less_soc_dir %>/user-error-style.less',
+          '<%= meta.src.css_soc_dir %>/main.css': '<%= meta.src.less_soc_dir %>/main.less',
           /* Development GSOC files */
           '<%= meta.src.css_gsoc_dir %>/buttons.css': '<%= meta.src.less_gsoc_dir %>/buttons.less',
           '<%= meta.src.css_gsoc_dir %>/dashboard.css': '<%= meta.src.less_gsoc_dir %>/dashboard.less',
@@ -107,6 +108,7 @@
           '<%= meta.build.css_soc_dir %>/search_page.css': '<%= meta.src.less_soc_dir %>/search_page.less',
           '<%= meta.build.css_soc_dir %>/server-error-style.css': '<%= meta.src.less_soc_dir %>/server-error-style.less',
           '<%= meta.build.css_soc_dir %>/user-error-style.css': '<%= meta.src.less_soc_dir %>/user-error-style.less',
+          '<%= meta.build.css_soc_dir %>/main.css': '<%= meta.src.less_soc_dir %>/main.less',
           /* Build GSOC files */
           '<%= meta.build.css_gsoc_dir %>/buttons.css': '<%= meta.src.less_gsoc_dir %>/buttons.less',
           '<%= meta.build.css_gsoc_dir %>/dashboard.css': '<%= meta.src.less_gsoc_dir %>/dashboard.less',
diff --git a/app/melange/content/html/melange/base.html b/app/melange/content/html/melange/base.html
new file mode 100644
index 0000000..f8ba285
--- /dev/null
+++ b/app/melange/content/html/melange/base.html
@@ -0,0 +1,39 @@
+{% extends "melange/root.html" %}
+{% comment %}
+Licensed 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.
+{% endcomment %}
+
+{% block stylesheets %}
+  <link rel="stylesheet" type="text/css" media="screen" href="/soc/content/{{ app_version }}/css/soc/main.css" />
+  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600' rel='stylesheet' type='text/css'>
+{% endblock stylesheets %}
+
+{% block body %}
+  <header class="main-header" role="banner">
+    <h1><span>Welcome to </span><span class="visuallyhidden">melange</span><img src="/soc/content/{{ app_version }}/images/soc/logo/melange-logo.png" alt="melange"/></h1>
+    <p>{{ site_description }}</p>
+  </header>
+
+  <main class="main-content" role="main">
+    {% block page_content %}
+      {{ templ.render }} 
+    {% endblock page_content %}
+  </main>
+
+  <footer class="main-footer" role="contentinfo">
+    <p>
+      <span class="powered">Powered by: <img class="melange-logo" src="/soc/content/{{ app_version }}/images/soc/logo/melange-logo.png" alt="melange"/></span>
+      <span class="empowered">Empowered by: <a class="ir echoditto-logo" href="http://www.echoditto.com/">echoditto</a> <span class="plus-symbol">+</span> <a class="ir neal-maher-logo" href="http://nealmaher.com/">neal maher</a></span>
+    </p>
+  </footer>
+{% endblock body %}
diff --git a/app/melange/content/html/melange/landing_page/_contact_us_section.html b/app/melange/content/html/melange/landing_page/_contact_us_section.html
new file mode 100644
index 0000000..19e15f4
--- /dev/null
+++ b/app/melange/content/html/melange/landing_page/_contact_us_section.html
@@ -0,0 +1,7 @@
+<h3>Find us on ...</h3>
+<ul class="no-list">
+  {% if google_plus %}<li class="google-icon"><a class="ir" href="{{ google_plus }}">google+</a></li>{% endif %}
+  {% if blog %}<li class="blogger-icon"><a class="ir" href="{{ blog }}">blogger</a></li>{% endif %}
+  {% if irc_channel %}<li class="irc-icon"><a href="{{ irc_channel }}">irc</a></li>{% endif %}
+  {% if mailing_list %}<li class="email-icon"><a class="ir" href="{{ mailing_list }}">email</a></li>{% endif %}
+</ul>
diff --git a/app/melange/content/html/melange/landing_page/_program_section.html b/app/melange/content/html/melange/landing_page/_program_section.html
new file mode 100644
index 0000000..e4ae2c1
--- /dev/null
+++ b/app/melange/content/html/melange/landing_page/_program_section.html
@@ -0,0 +1,20 @@
+<div class="project {% if is_active %} active{% endif %}">
+  <a href="{{ homepage_url }}">
+    <div class="active-banner">
+      <div class="triangle-top"></div>
+      <div class="triangle-bottom"></div>
+      <p>Currently<br>Active!</p>
+    </div>
+    <div class="project-image">
+      <img src="/soc/content/{{ app_version }}/{{ image_path }}" alt="{{ program.name }}" />
+    </div>
+    <div class="project-info">
+      <div class="project-title>{{ program.name }}</div>
+      <div class="project-description">
+        <p>{{ program.description }}</p>
+        <p class="unactive-description">TODO(daniel): unactive description</p>
+        <p class="project-button">Visit</p>
+      </div>
+    </div>
+  </a>
+</div>
\ No newline at end of file
diff --git a/app/melange/content/html/melange/landing_page/landing_page.html b/app/melange/content/html/melange/landing_page/landing_page.html
new file mode 100644
index 0000000..01293dd
--- /dev/null
+++ b/app/melange/content/html/melange/landing_page/landing_page.html
@@ -0,0 +1,32 @@
+{% extends "melange/base.html" %}
+{% comment %}
+Licensed 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.
+{% endcomment %}
+
+{% block page_content %}
+<main class="main-content" role="main">
+  <section class="projects {% if active_programs_counter == 1 %}one-active{% else %}two-active{% endif %}">
+    {% for program_section in program_sections %}
+      {{ program_section.render }}
+    {% empty %}
+      <span>Sorry, there are no active programs at this time</span>
+    {% endfor %}
+  </section>
+
+  {% if contact_us_section.isAnyContactChannelSet %}
+    <section class="main-footer" role="contentinfo">
+      {{ contact_us_section.render }}
+    </section>
+  {% endif %}
+</main>
+{% endblock page_content %}
diff --git a/app/soc/templates/soc/base.html b/app/melange/content/html/melange/root.html
similarity index 100%
rename from app/soc/templates/soc/base.html
rename to app/melange/content/html/melange/root.html
diff --git a/app/settings.py b/app/settings.py
index 229a8ef..b72a2b7 100755
--- a/app/settings.py
+++ b/app/settings.py
@@ -91,6 +91,7 @@
     # TODO(proto): customize the template search directories
     os.path.join(ROOT_PATH, 'soc', 'templates'),
     os.path.join(ROOT_PATH, 'shell', 'templates'),
+    os.path.join(ROOT_PATH, 'melange', 'content', 'html'),
     os.path.join(ROOT_PATH, 'summerofcode', 'content', 'html'),
     os.path.join(ROOT_PATH, 'codein', 'content', 'html'),
 )
diff --git a/app/soc/content/images/gci/logo/landing-page-gci2013.png b/app/soc/content/images/gci/logo/landing-page-gci2013.png
new file mode 100644
index 0000000..f25270b
--- /dev/null
+++ b/app/soc/content/images/gci/logo/landing-page-gci2013.png
Binary files differ
diff --git a/app/soc/content/images/gsoc/logo/landing-page-gsoc2014.png b/app/soc/content/images/gsoc/logo/landing-page-gsoc2014.png
new file mode 100644
index 0000000..bb1db26
--- /dev/null
+++ b/app/soc/content/images/gsoc/logo/landing-page-gsoc2014.png
Binary files differ
diff --git a/app/soc/content/images/soc/active-bg-hover.png b/app/soc/content/images/soc/active-bg-hover.png
new file mode 100644
index 0000000..a144059
--- /dev/null
+++ b/app/soc/content/images/soc/active-bg-hover.png
Binary files differ
diff --git a/app/soc/content/images/soc/active-bg.jpg b/app/soc/content/images/soc/active-bg.jpg
new file mode 100644
index 0000000..f8a3c97
--- /dev/null
+++ b/app/soc/content/images/soc/active-bg.jpg
Binary files differ
diff --git a/app/soc/content/images/soc/arrow-bottom.png b/app/soc/content/images/soc/arrow-bottom.png
new file mode 100644
index 0000000..0f60abc
--- /dev/null
+++ b/app/soc/content/images/soc/arrow-bottom.png
Binary files differ
diff --git a/app/soc/content/images/soc/arrow-bottom.svg b/app/soc/content/images/soc/arrow-bottom.svg
new file mode 100644
index 0000000..9633af9
--- /dev/null
+++ b/app/soc/content/images/soc/arrow-bottom.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100px" height="19px" viewBox="0 0 100 19" enable-background="new 0 0 100 19" xml:space="preserve">
+<polygon fill="#F19906" points="50,19 0,0 100,0 "/>
+</svg>
diff --git a/app/soc/content/images/soc/arrow-top.png b/app/soc/content/images/soc/arrow-top.png
new file mode 100644
index 0000000..23be340
--- /dev/null
+++ b/app/soc/content/images/soc/arrow-top.png
Binary files differ
diff --git a/app/soc/content/images/soc/arrow-top.svg b/app/soc/content/images/soc/arrow-top.svg
new file mode 100644
index 0000000..68a605f
--- /dev/null
+++ b/app/soc/content/images/soc/arrow-top.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="12px" height="10px" viewBox="0 0 12 10" enable-background="new 0 0 12 10" xml:space="preserve">
+<polygon fill="#D96500" points="12,10 0,10 12,0 "/>
+</svg>
diff --git a/app/soc/content/images/soc/blogger-icon-sprite.png b/app/soc/content/images/soc/blogger-icon-sprite.png
new file mode 100644
index 0000000..3836f7e
--- /dev/null
+++ b/app/soc/content/images/soc/blogger-icon-sprite.png
Binary files differ
diff --git a/app/soc/content/images/soc/blogger-icon-sprite.svg b/app/soc/content/images/soc/blogger-icon-sprite.svg
new file mode 100644
index 0000000..1a04d62
--- /dev/null
+++ b/app/soc/content/images/soc/blogger-icon-sprite.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="56px" height="28px" viewBox="0 0 56 28" enable-background="new 0 0 56 28" xml:space="preserve">
+<g id="Layer_2" display="none">
+	<rect display="inline" fill="#F680FF" width="28" height="28"/>
+	<rect x="28" display="inline" fill="#F9C5FF" width="28" height="28"/>
+</g>
+<path fill="#1F93CF" d="M25.309,10.838h-1.147c-1.126,0-1.791-0.703-1.791-1.527V8.577c0-3.738-4.079-7.664-7.594-7.664H9.242
+	c-4.65,0-8.313,3.663-8.313,8.313v9.93c0,4.366,3.758,7.931,7.621,7.931h10.512c4.287,0,8.008-3.604,8.008-8.008v-6.285
+	C27.07,11.626,26.73,10.838,25.309,10.838z M9.242,7.793h4.751c0.837,0,1.522,0.685,1.522,1.522c0,0.834-0.69,1.522-1.522,1.522
+	H9.242c-0.839,0-1.524-0.685-1.524-1.522C7.719,8.482,8.407,7.793,9.242,7.793z M18.681,20.305H9.242
+	c-0.837,0-1.524-0.685-1.524-1.522c0.001-0.834,0.689-1.524,1.524-1.524h9.439c0.839,0,1.524,0.685,1.524,1.524
+	C20.205,19.616,19.514,20.305,18.681,20.305z"/>
+<path fill="#F29B07" d="M53.309,10.838h-1.147c-1.126,0-1.791-0.703-1.791-1.527V8.577c0-3.738-4.079-7.664-7.594-7.664h-5.535
+	c-4.65,0-8.313,3.663-8.313,8.313v9.93c0,4.366,3.758,7.931,7.621,7.931h10.512c4.287,0,8.008-3.604,8.008-8.008v-6.285
+	C55.07,11.626,54.73,10.838,53.309,10.838z M37.242,7.793h4.751c0.837,0,1.522,0.685,1.522,1.522c0,0.834-0.69,1.522-1.522,1.522
+	h-4.751c-0.839,0-1.524-0.685-1.524-1.522C35.719,8.482,36.407,7.793,37.242,7.793z M46.681,20.305h-9.439
+	c-0.837,0-1.524-0.685-1.524-1.522c0.001-0.834,0.689-1.524,1.524-1.524h9.439c0.839,0,1.524,0.685,1.524,1.524
+	C48.205,19.616,47.514,20.305,46.681,20.305z"/>
+<g id="Layer_3" display="none">
+	<path display="inline" fill="#1F93CF" d="M24.745,5.092H3.637c-1.186,0-2.931,0.977-2.931,2.394v13.138
+		c0,1.433,1.717,2.285,2.931,2.285h21.108c1.263,0,2.549-0.941,2.549-2.284V7.486C27.294,6.137,26.008,5.092,24.745,5.092z
+		 M24.712,6.736c-3.09,2.467-7.842,5.822-8.881,6.43c-1.049,0.616-2.359,0.663-3.417,0.118c-1.173-0.603-6.176-4.389-8.959-6.525
+		C3.517,6.75,3.578,6.736,3.637,6.736H24.712z M11.673,14.731c0.723,0.371,1.525,0.556,2.33,0.556c0.916,0,1.836-0.239,2.647-0.713
+		c0.147-0.086,0.372-0.276,0.629-0.449l5.555,7.139H5.29l5.524-7.099C11.171,14.399,11.469,14.626,11.673,14.731z M2.077,20.624
+		V7.91c1.645,1.188,4.965,3.721,7.297,5.376l-6.246,8.008C2.615,21.159,2.077,20.789,2.077,20.624z M24.801,21.336L18.5,13.239
+		c2.231-1.586,5.504-4.068,7.148-5.276v12.66C25.649,20.926,25.251,21.275,24.801,21.336z"/>
+	<path display="inline" fill="#F29B07" d="M52.745,5.092H31.637c-1.186,0-2.931,0.977-2.931,2.394v13.138
+		c0,1.433,1.717,2.285,2.931,2.285h21.108c1.263,0,2.549-0.941,2.549-2.284V7.486C55.294,6.137,54.008,5.092,52.745,5.092z
+		 M52.712,6.736c-3.09,2.467-7.842,5.822-8.881,6.43c-1.049,0.616-2.359,0.663-3.417,0.118c-1.173-0.603-6.176-4.389-8.959-6.525
+		c0.061-0.009,0.122-0.023,0.182-0.023C31.637,6.736,52.712,6.736,52.712,6.736z M39.673,14.731c0.723,0.371,1.525,0.556,2.33,0.556
+		c0.916,0,1.836-0.239,2.647-0.713c0.147-0.086,0.372-0.276,0.629-0.449l5.555,7.139H33.29l5.524-7.099
+		C39.171,14.399,39.469,14.626,39.673,14.731z M30.077,20.624V7.91c1.645,1.188,4.965,3.721,7.297,5.376l-6.246,8.008
+		C30.615,21.159,30.077,20.789,30.077,20.624z M52.801,21.336L46.5,13.239c2.231-1.586,5.504-4.068,7.148-5.276v12.66
+		C53.649,20.926,53.251,21.275,52.801,21.336z"/>
+</g>
+</svg>
diff --git a/app/soc/content/images/soc/echoditto-logo-sprite.png b/app/soc/content/images/soc/echoditto-logo-sprite.png
new file mode 100644
index 0000000..809cf31
--- /dev/null
+++ b/app/soc/content/images/soc/echoditto-logo-sprite.png
Binary files differ
diff --git a/app/soc/content/images/soc/email-icon-sprite.png b/app/soc/content/images/soc/email-icon-sprite.png
new file mode 100644
index 0000000..0a5bf50
--- /dev/null
+++ b/app/soc/content/images/soc/email-icon-sprite.png
Binary files differ
diff --git a/app/soc/content/images/soc/email-icon-sprite.svg b/app/soc/content/images/soc/email-icon-sprite.svg
new file mode 100644
index 0000000..fbf7a5d
--- /dev/null
+++ b/app/soc/content/images/soc/email-icon-sprite.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px"
+	 height="28px" viewBox="0 0 56 28" enable-background="new 0 0 56 28" xml:space="preserve">
+<g id="Layer_2" display="none">
+	<rect display="inline" fill="#F680FF" width="28" height="28"/>
+	<rect x="28" display="inline" fill="#F9C5FF" width="28" height="28"/>
+</g>
+<g id="Layer_1" display="none">
+	<path display="inline" fill-rule="evenodd" clip-rule="evenodd" fill="#1F93CF" d="M9.242,0.913h5.535
+		c3.515,0,7.594,3.926,7.594,7.664v0.734c0,0.824,0.665,1.527,1.791,1.527h1.147c1.421,0,1.761,0.788,1.761,1.956v6.285
+		c0,4.404-3.721,8.008-8.008,8.008H8.55c-3.863,0-7.621-3.565-7.621-7.931V9.226C0.929,4.576,4.592,0.913,9.242,0.913L9.242,0.913z
+		 M9.242,7.793h4.751c0.837,0,1.522,0.685,1.522,1.522c0,0.834-0.69,1.522-1.522,1.522H9.242c-0.839,0-1.524-0.685-1.524-1.522
+		C7.719,8.482,8.407,7.793,9.242,7.793L9.242,7.793z M9.242,17.259h9.439c0.839,0,1.524,0.685,1.524,1.524
+		c0,0.833-0.691,1.522-1.524,1.522H9.242c-0.837,0-1.524-0.685-1.524-1.522C7.719,17.949,8.407,17.259,9.242,17.259L9.242,17.259z"
+		/>
+	<path display="inline" fill-rule="evenodd" clip-rule="evenodd" fill="#F29B07" d="M37.242,0.913h5.535
+		c3.515,0,7.594,3.926,7.594,7.664v0.734c0,0.824,0.665,1.527,1.791,1.527h1.147c1.421,0,1.761,0.788,1.761,1.956v6.285
+		c0,4.404-3.721,8.008-8.008,8.008H36.55c-3.863,0-7.621-3.565-7.621-7.931V9.226C28.929,4.576,32.592,0.913,37.242,0.913
+		L37.242,0.913z M37.242,7.793h4.751c0.837,0,1.522,0.685,1.522,1.522c0,0.834-0.69,1.522-1.522,1.522h-4.751
+		c-0.839,0-1.524-0.685-1.524-1.522C35.719,8.482,36.407,7.793,37.242,7.793L37.242,7.793z M37.242,17.259h9.439
+		c0.839,0,1.524,0.685,1.524,1.524c0,0.833-0.691,1.522-1.524,1.522h-9.439c-0.837,0-1.524-0.685-1.524-1.522
+		C35.719,17.949,36.407,17.259,37.242,17.259L37.242,17.259z"/>
+</g>
+<g id="Layer_4" display="none">
+	<g display="inline">
+		<polygon fill="#1F93CF" points="27,13 24,13 24,10 22,10 22,13 19,13 19,15 22,15 22,17 24,17 24,15 27,15 		"/>
+		<path fill="#1F93CF" d="M14.644,15.739l-1.209-0.923c-0.369-0.299-0.872-0.695-0.872-1.421c0-0.728,0.503-1.192,0.939-1.621
+			c1.409-1.089,2.818-2.111,2.818-4.556c0-2.513-1.529-3.218-2.3-4.218h1.988l2.172-1.465l-6.994-0.07
+			c-1.813,0-4.257,0.153-6.17,1.706C3.576,4.393,3.102,6.173,3.102,7.693c0,2.576,2.013,5.18,5.569,5.18
+			c0.336,0,0.703-0.037,1.074-0.07c-0.167,0.396-0.336,0.725-0.336,1.287c0,1.024,0.536,1.65,1.007,2.245
+			c-1.509,0.101-4.329,0.265-6.407,1.52c-1.982,1.158-2.584,2.842-2.584,4.033c0,2.447,2.252,4.751,7.117,4.751
+			c5.77,0,8.919-3.164,8.919-6.271C17.461,18.088,16.12,16.963,14.644,15.739z M10.249,12.022c-2.886,0-4.194-3.669-4.194-5.883
+			c0-0.86,0.167-1.834,0.737-2.529c0.538-0.662,1.477-1.008,2.35-1.008c2.784,0,4.226,3.702,4.226,6.082
+			c0,0.595-0.067,1.568-0.838,2.33C11.992,11.543,11.087,12.022,10.249,12.022z M10.278,25.229c-3.589,0-5.905-1.687-5.905-4.034
+			c0-2.347,2.147-3.14,2.885-3.404c1.409-0.463,3.222-0.53,3.524-0.53c0.334,0,0.502,0,0.769,0.034
+			c2.552,1.786,3.659,2.676,3.659,4.364C15.211,23.705,13.498,25.229,10.278,25.229z"/>
+	</g>
+	<g display="inline">
+		<polygon fill="#F29B07" points="55,13 52,13 52,10 50,10 50,13 47,13 47,15 50,15 50,17 52,17 52,15 55,15 		"/>
+		<path fill="#F29B07" d="M42.432,15.687l-1.209-0.923c-0.369-0.299-0.872-0.695-0.872-1.421c0-0.728,0.503-1.192,0.939-1.621
+			c1.409-1.089,2.818-2.085,2.818-4.53c0-2.513-1.529-3.192-2.3-4.192h1.988l2.172-1.491l-6.994-0.083
+			c-1.813,0-4.257,0.146-6.17,1.7c-1.441,1.222-1.914,2.998-1.914,4.518c0,2.576,2.013,5.178,5.569,5.178
+			c0.336,0,0.703-0.038,1.074-0.07c-0.167,0.396-0.336,0.725-0.336,1.287c0,1.024,0.536,1.65,1.007,2.245
+			c-1.509,0.101-4.329,0.265-6.407,1.52c-1.982,1.158-2.584,2.842-2.584,4.033c0,2.447,2.252,4.751,7.117,4.751
+			c5.77,0,8.919-3.164,8.919-6.271C45.249,18.036,43.907,16.911,42.432,15.687z M38.037,11.97c-2.886,0-4.194-3.669-4.194-5.883
+			c0-0.86,0.167-1.834,0.737-2.529c0.538-0.662,1.477-1.008,2.35-1.008c2.784,0,4.226,3.702,4.226,6.082
+			c0,0.595-0.067,1.568-0.838,2.33C39.779,11.491,38.875,11.97,38.037,11.97z M38.066,25.176c-3.589,0-5.905-1.687-5.905-4.034
+			c0-2.347,2.147-3.14,2.885-3.404c1.409-0.463,3.222-0.53,3.524-0.53c0.334,0,0.502,0,0.769,0.034
+			c2.552,1.786,3.659,2.676,3.659,4.364C42.998,23.653,41.285,25.176,38.066,25.176z"/>
+	</g>
+</g>
+<g id="Layer_3">
+	<path fill="#1F93CF" d="M25.133,4.77H3.263c-1.229,0-3.037,1.012-3.037,2.48v13.612c0,1.485,1.779,2.367,3.037,2.367h21.87
+		c1.309,0,2.641-0.975,2.641-2.367V7.25C27.774,5.853,26.442,4.77,25.133,4.77z M25.099,6.474c-3.202,2.556-8.125,6.032-9.201,6.662
+		c-1.087,0.638-2.445,0.687-3.54,0.123c-1.215-0.625-6.399-4.547-9.283-6.761c0.063-0.009,0.127-0.024,0.188-0.024H25.099z
+		 M11.589,14.758c0.749,0.385,1.58,0.576,2.414,0.576c0.949,0,1.902-0.248,2.742-0.739c0.153-0.089,0.385-0.286,0.652-0.465
+		l5.756,7.397H4.976l5.724-7.355C11.069,14.414,11.378,14.649,11.589,14.758z M1.646,20.863V7.69
+		c1.704,1.231,5.145,3.856,7.561,5.57l-6.472,8.298C2.203,21.418,1.646,21.035,1.646,20.863z M25.191,21.601l-6.528-8.389
+		c2.311-1.643,5.703-4.215,7.407-5.467v13.118C26.07,21.176,25.657,21.538,25.191,21.601z"/>
+	<path fill="#F29B07" d="M53.133,4.77h-21.87c-1.229,0-3.037,1.012-3.037,2.48v13.612c0,1.485,1.779,2.367,3.037,2.367h21.87
+		c1.309,0,2.641-0.975,2.641-2.367V7.25C55.774,5.853,54.442,4.77,53.133,4.77z M53.099,6.474c-3.202,2.556-8.125,6.032-9.201,6.662
+		c-1.087,0.638-2.445,0.687-3.54,0.123c-1.215-0.625-6.399-4.547-9.283-6.761c0.063-0.009,0.127-0.024,0.188-0.024H53.099z
+		 M39.589,14.758c0.749,0.385,1.58,0.576,2.414,0.576c0.949,0,1.902-0.248,2.742-0.739c0.153-0.089,0.385-0.286,0.652-0.465
+		l5.756,7.397H32.976l5.724-7.355C39.069,14.414,39.378,14.649,39.589,14.758z M29.646,20.863V7.69
+		c1.704,1.231,5.145,3.856,7.561,5.57l-6.472,8.298C30.203,21.418,29.646,21.035,29.646,20.863z M53.191,21.601l-6.528-8.389
+		c2.311-1.643,5.703-4.215,7.407-5.467v13.118C54.07,21.176,53.657,21.538,53.191,21.601z"/>
+</g>
+</svg>
diff --git a/app/soc/content/images/soc/google-icon-sprite.png b/app/soc/content/images/soc/google-icon-sprite.png
new file mode 100644
index 0000000..f32499c
--- /dev/null
+++ b/app/soc/content/images/soc/google-icon-sprite.png
Binary files differ
diff --git a/app/soc/content/images/soc/google-icon-sprite.svg b/app/soc/content/images/soc/google-icon-sprite.svg
new file mode 100644
index 0000000..8afa8df
--- /dev/null
+++ b/app/soc/content/images/soc/google-icon-sprite.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px"
+	 height="28px" viewBox="0 0 56 28" enable-background="new 0 0 56 28" xml:space="preserve">
+<g id="Layer_2" display="none">
+	<rect display="inline" fill="#F680FF" width="28" height="28"/>
+	<rect x="28" display="inline" fill="#F9C5FF" width="28" height="28"/>
+</g>
+<g id="Layer_1" display="none">
+	<path display="inline" fill-rule="evenodd" clip-rule="evenodd" fill="#1F93CF" d="M9.242,0.913h5.535
+		c3.515,0,7.594,3.926,7.594,7.664v0.734c0,0.824,0.665,1.527,1.791,1.527h1.147c1.421,0,1.761,0.788,1.761,1.956v6.285
+		c0,4.404-3.721,8.008-8.008,8.008H8.55c-3.863,0-7.621-3.565-7.621-7.931V9.226C0.929,4.576,4.592,0.913,9.242,0.913L9.242,0.913z
+		 M9.242,7.793h4.751c0.837,0,1.522,0.685,1.522,1.522c0,0.834-0.69,1.522-1.522,1.522H9.242c-0.839,0-1.524-0.685-1.524-1.522
+		C7.719,8.482,8.407,7.793,9.242,7.793L9.242,7.793z M9.242,17.259h9.439c0.839,0,1.524,0.685,1.524,1.524
+		c0,0.833-0.691,1.522-1.524,1.522H9.242c-0.837,0-1.524-0.685-1.524-1.522C7.719,17.949,8.407,17.259,9.242,17.259L9.242,17.259z"
+		/>
+	<path display="inline" fill-rule="evenodd" clip-rule="evenodd" fill="#F29B07" d="M37.242,0.913h5.535
+		c3.515,0,7.594,3.926,7.594,7.664v0.734c0,0.824,0.665,1.527,1.791,1.527h1.147c1.421,0,1.761,0.788,1.761,1.956v6.285
+		c0,4.404-3.721,8.008-8.008,8.008H36.55c-3.863,0-7.621-3.565-7.621-7.931V9.226C28.929,4.576,32.592,0.913,37.242,0.913
+		L37.242,0.913z M37.242,7.793h4.751c0.837,0,1.522,0.685,1.522,1.522c0,0.834-0.69,1.522-1.522,1.522h-4.751
+		c-0.839,0-1.524-0.685-1.524-1.522C35.719,8.482,36.407,7.793,37.242,7.793L37.242,7.793z M37.242,17.259h9.439
+		c0.839,0,1.524,0.685,1.524,1.524c0,0.833-0.691,1.522-1.524,1.522h-9.439c-0.837,0-1.524-0.685-1.524-1.522
+		C35.719,17.949,36.407,17.259,37.242,17.259L37.242,17.259z"/>
+</g>
+<g id="Layer_4">
+	<g>
+		<polygon fill="#1F93CF" points="27,13 24,13 24,10 22,10 22,13 19,13 19,15 22,15 22,17 24,17 24,15 27,15 		"/>
+		<path fill="#1F93CF" d="M14.644,15.739l-1.209-0.923c-0.369-0.299-0.872-0.695-0.872-1.421c0-0.728,0.503-1.192,0.939-1.621
+			c1.409-1.089,2.818-2.111,2.818-4.556c0-2.513-1.529-3.218-2.3-4.218h1.988l2.172-1.465l-6.994-0.07
+			c-1.813,0-4.257,0.153-6.17,1.706C3.576,4.393,3.102,6.173,3.102,7.693c0,2.576,2.013,5.18,5.569,5.18
+			c0.336,0,0.703-0.037,1.074-0.07c-0.167,0.396-0.336,0.725-0.336,1.287c0,1.024,0.536,1.65,1.007,2.245
+			c-1.509,0.101-4.329,0.265-6.407,1.52c-1.982,1.158-2.584,2.842-2.584,4.033c0,2.447,2.252,4.751,7.117,4.751
+			c5.77,0,8.919-3.164,8.919-6.271C17.461,18.088,16.12,16.963,14.644,15.739z M10.249,12.022c-2.886,0-4.194-3.669-4.194-5.883
+			c0-0.86,0.167-1.834,0.737-2.529c0.538-0.662,1.477-1.008,2.35-1.008c2.784,0,4.226,3.702,4.226,6.082
+			c0,0.595-0.067,1.568-0.838,2.33C11.992,11.543,11.087,12.022,10.249,12.022z M10.278,25.229c-3.589,0-5.905-1.687-5.905-4.034
+			c0-2.347,2.147-3.14,2.885-3.404c1.409-0.463,3.222-0.53,3.524-0.53c0.334,0,0.502,0,0.769,0.034
+			c2.552,1.786,3.659,2.676,3.659,4.364C15.211,23.705,13.498,25.229,10.278,25.229z"/>
+	</g>
+	<g>
+		<polygon fill="#F29B07" points="55,13 52,13 52,10 50,10 50,13 47,13 47,15 50,15 50,17 52,17 52,15 55,15 		"/>
+		<path fill="#F29B07" d="M42.432,15.687l-1.209-0.923c-0.369-0.299-0.872-0.695-0.872-1.421c0-0.728,0.503-1.192,0.939-1.621
+			c1.409-1.089,2.818-2.085,2.818-4.53c0-2.513-1.529-3.192-2.3-4.192h1.988l2.172-1.491l-6.994-0.083
+			c-1.813,0-4.257,0.146-6.17,1.7c-1.441,1.222-1.914,2.998-1.914,4.518c0,2.576,2.013,5.178,5.569,5.178
+			c0.336,0,0.703-0.038,1.074-0.07c-0.167,0.396-0.336,0.725-0.336,1.287c0,1.024,0.536,1.65,1.007,2.245
+			c-1.509,0.101-4.329,0.265-6.407,1.52c-1.982,1.158-2.584,2.842-2.584,4.033c0,2.447,2.252,4.751,7.117,4.751
+			c5.77,0,8.919-3.164,8.919-6.271C45.249,18.036,43.907,16.911,42.432,15.687z M38.037,11.97c-2.886,0-4.194-3.669-4.194-5.883
+			c0-0.86,0.167-1.834,0.737-2.529c0.538-0.662,1.477-1.008,2.35-1.008c2.784,0,4.226,3.702,4.226,6.082
+			c0,0.595-0.067,1.568-0.838,2.33C39.779,11.491,38.875,11.97,38.037,11.97z M38.066,25.176c-3.589,0-5.905-1.687-5.905-4.034
+			c0-2.347,2.147-3.14,2.885-3.404c1.409-0.463,3.222-0.53,3.524-0.53c0.334,0,0.502,0,0.769,0.034
+			c2.552,1.786,3.659,2.676,3.659,4.364C42.998,23.653,41.285,25.176,38.066,25.176z"/>
+	</g>
+</g>
+<g id="Layer_3" display="none">
+	<path display="inline" fill="#1F93CF" d="M24.745,5.092H3.637c-1.186,0-2.931,0.977-2.931,2.394v13.138
+		c0,1.433,1.717,2.285,2.931,2.285h21.108c1.263,0,2.549-0.941,2.549-2.284V7.486C27.294,6.137,26.008,5.092,24.745,5.092z
+		 M24.712,6.736c-3.09,2.467-7.842,5.822-8.881,6.43c-1.049,0.616-2.359,0.663-3.417,0.118c-1.173-0.603-6.176-4.389-8.959-6.525
+		C3.517,6.75,3.578,6.736,3.637,6.736H24.712z M11.673,14.731c0.723,0.371,1.525,0.556,2.33,0.556c0.916,0,1.836-0.239,2.647-0.713
+		c0.147-0.086,0.372-0.276,0.629-0.449l5.555,7.139H5.29l5.524-7.099C11.171,14.399,11.469,14.626,11.673,14.731z M2.077,20.624
+		V7.91c1.645,1.188,4.965,3.721,7.297,5.376l-6.246,8.008C2.615,21.159,2.077,20.789,2.077,20.624z M24.801,21.336l-6.301-8.097
+		c2.231-1.586,5.504-4.068,7.148-5.276v12.66C25.649,20.926,25.251,21.275,24.801,21.336z"/>
+	<path display="inline" fill="#F29B07" d="M52.745,5.092H31.637c-1.186,0-2.931,0.977-2.931,2.394v13.138
+		c0,1.433,1.717,2.285,2.931,2.285h21.108c1.263,0,2.549-0.941,2.549-2.284V7.486C55.294,6.137,54.008,5.092,52.745,5.092z
+		 M52.712,6.736c-3.09,2.467-7.842,5.822-8.881,6.43c-1.049,0.616-2.359,0.663-3.417,0.118c-1.173-0.603-6.176-4.389-8.959-6.525
+		c0.061-0.009,0.122-0.023,0.182-0.023H52.712z M39.673,14.731c0.723,0.371,1.525,0.556,2.33,0.556c0.916,0,1.836-0.239,2.647-0.713
+		c0.147-0.086,0.372-0.276,0.629-0.449l5.555,7.139H33.29l5.524-7.099C39.171,14.399,39.469,14.626,39.673,14.731z M30.077,20.624
+		V7.91c1.645,1.188,4.965,3.721,7.297,5.376l-6.246,8.008C30.615,21.159,30.077,20.789,30.077,20.624z M52.801,21.336l-6.301-8.097
+		c2.231-1.586,5.504-4.068,7.148-5.276v12.66C53.649,20.926,53.251,21.275,52.801,21.336z"/>
+</g>
+</svg>
diff --git a/app/soc/content/images/soc/house-icon-small.png b/app/soc/content/images/soc/house-icon-small.png
new file mode 100644
index 0000000..e4a6964
--- /dev/null
+++ b/app/soc/content/images/soc/house-icon-small.png
Binary files differ
diff --git a/app/soc/content/images/soc/house-icon-small.svg b/app/soc/content/images/soc/house-icon-small.svg
new file mode 100644
index 0000000..537a64a
--- /dev/null
+++ b/app/soc/content/images/soc/house-icon-small.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="28px" height="14px" viewBox="0 0 28 14" enable-background="new 0 0 28 14" xml:space="preserve">
+<polygon fill="#F6A006" points="20.902,0.096 14.778,5.348 14.778,13.904 18.667,13.904 18.667,8.46 23.333,8.46 23.333,13.904 
+	27.222,13.904 27.222,5.413 "/>
+<polygon fill="#1F93CF" points="6.902,0.096 0.778,5.348 0.778,13.904 4.667,13.904 4.667,8.46 9.333,8.46 9.333,13.904 
+	13.222,13.904 13.222,5.413 "/>
+</svg>
diff --git a/app/soc/content/images/soc/house-icon.png b/app/soc/content/images/soc/house-icon.png
new file mode 100644
index 0000000..268e28f
--- /dev/null
+++ b/app/soc/content/images/soc/house-icon.png
Binary files differ
diff --git a/app/soc/content/images/soc/house-icon.svg b/app/soc/content/images/soc/house-icon.svg
new file mode 100644
index 0000000..3a29ec0
--- /dev/null
+++ b/app/soc/content/images/soc/house-icon.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="36px" height="18px" viewBox="0 0 36 18" enable-background="new 0 0 36 18" xml:space="preserve">
+<g id="Layer_2" display="none">
+	<rect x="-9.163" y="0.318" display="inline" fill="#F78DFF" width="18" height="18"/>
+	<rect x="8.837" y="0.318" display="inline" fill="#F9C5FF" width="18" height="18"/>
+</g>
+<g id="Layer_1_1_">
+	<polygon fill="#F6A006" points="26.874,0.123 19,6.876 19,17.876 24,17.876 24,10.877 30,10.877 30,17.876 35,17.876 35,6.959 	"/>
+	<polygon fill="#1F93CF" points="8.874,0.123 1,6.876 1,17.876 6,17.876 6,10.877 12,10.877 12,17.876 17,17.876 17,6.959 	"/>
+</g>
+</svg>
diff --git a/app/soc/content/images/soc/logo/melange-logo.png b/app/soc/content/images/soc/logo/melange-logo.png
new file mode 100644
index 0000000..7643a84
--- /dev/null
+++ b/app/soc/content/images/soc/logo/melange-logo.png
Binary files differ
diff --git a/app/soc/content/images/soc/melange.png b/app/soc/content/images/soc/melange.png
new file mode 100644
index 0000000..c279a7b
--- /dev/null
+++ b/app/soc/content/images/soc/melange.png
Binary files differ
diff --git a/app/soc/content/images/soc/neal-maher-logo-sprite.png b/app/soc/content/images/soc/neal-maher-logo-sprite.png
new file mode 100644
index 0000000..a2c3f28
--- /dev/null
+++ b/app/soc/content/images/soc/neal-maher-logo-sprite.png
Binary files differ
diff --git a/app/soc/content/images/soc/non-bg-hover.png b/app/soc/content/images/soc/non-bg-hover.png
new file mode 100644
index 0000000..f49defd
--- /dev/null
+++ b/app/soc/content/images/soc/non-bg-hover.png
Binary files differ
diff --git a/app/soc/content/images/soc/non-bg.png b/app/soc/content/images/soc/non-bg.png
new file mode 100644
index 0000000..9043e06
--- /dev/null
+++ b/app/soc/content/images/soc/non-bg.png
Binary files differ
diff --git a/app/soc/content/less/soc/elements/footer.less b/app/soc/content/less/soc/elements/footer.less
new file mode 100644
index 0000000..a8b17e7
--- /dev/null
+++ b/app/soc/content/less/soc/elements/footer.less
@@ -0,0 +1,58 @@
+// ==========================================================================
+// Footer
+// ==========================================================================
+
+.main-footer {
+	max-width: 700px;
+	padding: 1em 5% 10em;
+	margin: 0 auto;
+	text-align: center;
+
+	p {
+		font-size: 0.8em;
+		color: #999999;
+	}
+
+	.melange-logo {
+		width: 70px;
+		margin: 0 2.5em 0 0.5em;
+	}
+
+	.echoditto-logo {
+		&:extend(.ir); //these styles are in _helper.scss
+		display: inline-block;
+		width: 70px;
+		height: 20px;
+		background: url('@{images_soc_location}/echoditto-logo-sprite.png');
+		margin: 0 5px -3px;
+		&:hover {
+			background-position: 100%;
+		}
+	}
+
+	.neal-maher-logo {
+		&:extend(.ir); //these styles are in _helper.scss
+		display: inline-block;
+		width: 59px;
+		height: 20px;
+		background: url('@{images_soc_location}/neal-maher-logo-sprite.png');
+		margin: 0 5px -3px;
+		&:hover {
+			background-position: 100%;
+		}
+	}
+
+	.powered, .empowered {
+		display: block;
+		margin-bottom: 1em;
+
+		@media @break-medium {
+			display: inline;
+			margin: 0;
+		}
+	}
+}
+
+
+
+
diff --git a/app/soc/content/less/soc/elements/general.less b/app/soc/content/less/soc/elements/general.less
new file mode 100644
index 0000000..7d24e92
--- /dev/null
+++ b/app/soc/content/less/soc/elements/general.less
@@ -0,0 +1,24 @@
+// ==========================================================================
+// General
+// ==========================================================================
+
+body {
+	font-family: @serif;
+	font-size: 100%;
+	line-height: 1.5;
+	color: @web-black;
+	background: #F1F1F1;
+	position: relative;
+	min-width: 300px;
+}
+
+.main-content {
+	max-width: 960px;
+	padding: 0 5%;
+	margin: 0 auto;
+
+	@media @break-medium {
+		padding: 0;
+		width: 960px;
+	}
+}
\ No newline at end of file
diff --git a/app/soc/content/less/soc/elements/grid.less b/app/soc/content/less/soc/elements/grid.less
new file mode 100644
index 0000000..d5ccadb
--- /dev/null
+++ b/app/soc/content/less/soc/elements/grid.less
@@ -0,0 +1,462 @@
+//  
+//  Variable Grid System.
+//  Learn more ~ http://www.spry-soft.com/grids/
+//  Based on 960 Grid System - http://960.gs/
+
+//  Licensed under GPL and MIT.
+//  
+
+//  
+//  Forces backgrounds to span full width,
+//  even if there is horizontal scrolling.
+//  Increase this if your layout is wider.
+
+//  Note: IE6 works fine without this fix.
+//  
+
+body {
+  min-width: 960px;
+}
+
+//  Containers
+// --------------------------------------------------------------------------------------------------*/
+.container_16 {
+	margin-left: auto;
+	margin-right: auto;
+	width: 960px;
+}
+
+//   Grid >> Global
+//  --------------------------------------------------------------------------------------------------*/
+
+
+.grid_1,
+.grid_2,
+.grid_3,
+.grid_4,
+.grid_5,
+.grid_6,
+.grid_7,
+.grid_8,
+.grid_9,
+.grid_10,
+.grid_11,
+.grid_12,
+.grid_13,
+.grid_14,
+.grid_15,
+.grid_16 {
+	display:inline;
+	float: left;
+	position: relative;
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+
+
+.push_1, .pull_1,
+.push_2, .pull_2,
+.push_3, .pull_3,
+.push_4, .pull_4,
+.push_5, .pull_5,
+.push_6, .pull_6,
+.push_7, .pull_7,
+.push_8, .pull_8,
+.push_9, .pull_9,
+.push_10, .pull_10,
+.push_11, .pull_11,
+.push_12, .pull_12,
+.push_13, .pull_13,
+.push_14, .pull_14,
+.push_15, .pull_15,
+.push_16, .pull_16 {
+	position:relative;
+}
+
+
+//  Grid >> Children (Alpha ~ First, Omega ~ Last)
+// --------------------------------------------------------------------------------------------------*/
+
+.alpha {
+	margin-left: 0;
+}
+
+.omega {
+	margin-right: 0;
+}
+
+//  Grid >> 16 Columns
+// --------------------------------------------------------------------------------------------------*/
+
+
+.container_16 .grid_1 {
+	width:40px;
+}
+
+.container_16 .grid_2 {
+	width:100px;
+}
+
+.container_16 .grid_3 {
+	width:160px;
+}
+
+.container_16 .grid_4 {
+	width:220px;
+}
+
+.container_16 .grid_5 {
+	width:280px;
+}
+
+.container_16 .grid_6 {
+	width:340px;
+}
+
+.container_16 .grid_7 {
+	width:400px;
+}
+
+.container_16 .grid_8 {
+	width:460px;
+}
+
+.container_16 .grid_9 {
+	width:520px;
+}
+
+.container_16 .grid_10 {
+	width:580px;
+}
+
+.container_16 .grid_11 {
+	width:640px;
+}
+
+.container_16 .grid_12 {
+	width:700px;
+}
+
+.container_16 .grid_13 {
+	width:760px;
+}
+
+.container_16 .grid_14 {
+	width:820px;
+}
+
+.container_16 .grid_15 {
+	width:880px;
+}
+
+.container_16 .grid_16 {
+	width:940px;
+}
+
+
+
+
+//  Prefix Extra Space >> 16 Columns
+// --------------------------------------------------------------------------------------------------*/
+
+
+.container_16 .prefix_1 {
+	padding-left:60px;
+}
+
+.container_16 .prefix_2 {
+	padding-left:120px;
+}
+
+.container_16 .prefix_3 {
+	padding-left:180px;
+}
+
+.container_16 .prefix_4 {
+	padding-left:240px;
+}
+
+.container_16 .prefix_5 {
+	padding-left:300px;
+}
+
+.container_16 .prefix_6 {
+	padding-left:360px;
+}
+
+.container_16 .prefix_7 {
+	padding-left:420px;
+}
+
+.container_16 .prefix_8 {
+	padding-left:480px;
+}
+
+.container_16 .prefix_9 {
+	padding-left:540px;
+}
+
+.container_16 .prefix_10 {
+	padding-left:600px;
+}
+
+.container_16 .prefix_11 {
+	padding-left:660px;
+}
+
+.container_16 .prefix_12 {
+	padding-left:720px;
+}
+
+.container_16 .prefix_13 {
+	padding-left:780px;
+}
+
+.container_16 .prefix_14 {
+	padding-left:840px;
+}
+
+.container_16 .prefix_15 {
+	padding-left:900px;
+}
+
+
+
+//  Suffix Extra Space >> 16 Columns
+// --------------------------------------------------------------------------------------------------*/
+
+
+.container_16 .suffix_1 {
+	padding-right:60px;
+}
+
+.container_16 .suffix_2 {
+	padding-right:120px;
+}
+
+.container_16 .suffix_3 {
+	padding-right:180px;
+}
+
+.container_16 .suffix_4 {
+	padding-right:240px;
+}
+
+.container_16 .suffix_5 {
+	padding-right:300px;
+}
+
+.container_16 .suffix_6 {
+	padding-right:360px;
+}
+
+.container_16 .suffix_7 {
+	padding-right:420px;
+}
+
+.container_16 .suffix_8 {
+	padding-right:480px;
+}
+
+.container_16 .suffix_9 {
+	padding-right:540px;
+}
+
+.container_16 .suffix_10 {
+	padding-right:600px;
+}
+
+.container_16 .suffix_11 {
+	padding-right:660px;
+}
+
+.container_16 .suffix_12 {
+	padding-right:720px;
+}
+
+.container_16 .suffix_13 {
+	padding-right:780px;
+}
+
+.container_16 .suffix_14 {
+	padding-right:840px;
+}
+
+.container_16 .suffix_15 {
+	padding-right:900px;
+}
+
+
+
+//  Push Space >> 16 Columns
+// --------------------------------------------------------------------------------------------------*/
+
+
+.container_16 .push_1 {
+	left:60px;
+}
+
+.container_16 .push_2 {
+	left:120px;
+}
+
+.container_16 .push_3 {
+	left:180px;
+}
+
+.container_16 .push_4 {
+	left:240px;
+}
+
+.container_16 .push_5 {
+	left:300px;
+}
+
+.container_16 .push_6 {
+	left:360px;
+}
+
+.container_16 .push_7 {
+	left:420px;
+}
+
+.container_16 .push_8 {
+	left:480px;
+}
+
+.container_16 .push_9 {
+	left:540px;
+}
+
+.container_16 .push_10 {
+	left:600px;
+}
+
+.container_16 .push_11 {
+	left:660px;
+}
+
+.container_16 .push_12 {
+	left:720px;
+}
+
+.container_16 .push_13 {
+	left:780px;
+}
+
+.container_16 .push_14 {
+	left:840px;
+}
+
+.container_16 .push_15 {
+	left:900px;
+}
+
+
+
+// Pull Space >> 16 Columns
+//--------------------------------------------------------------------------------------------------*/
+
+
+.container_16 .pull_1 {
+	left:-60px;
+}
+
+.container_16 .pull_2 {
+	left:-120px;
+}
+
+.container_16 .pull_3 {
+	left:-180px;
+}
+
+.container_16 .pull_4 {
+	left:-240px;
+}
+
+.container_16 .pull_5 {
+	left:-300px;
+}
+
+.container_16 .pull_6 {
+	left:-360px;
+}
+
+.container_16 .pull_7 {
+	left:-420px;
+}
+
+.container_16 .pull_8 {
+	left:-480px;
+}
+
+.container_16 .pull_9 {
+	left:-540px;
+}
+
+.container_16 .pull_10 {
+	left:-600px;
+}
+
+.container_16 .pull_11 {
+	left:-660px;
+}
+
+.container_16 .pull_12 {
+	left:-720px;
+}
+
+.container_16 .pull_13 {
+	left:-780px;
+}
+
+.container_16 .pull_14 {
+	left:-840px;
+}
+
+.container_16 .pull_15 {
+	left:-900px;
+}
+
+
+
+
+// `Clear Floated Elements
+//--------------------------------------------------------------------------------------------------*/
+
+/* http://sonspring.com/journal/clearing-floats */
+
+.clear {
+  clear: both;
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+// http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
+
+.clearfix:before,
+.clearfix:after {
+  content: '\0020';
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+// 
+// The following zoom:1 rule is specifically for IE6 + IE7.
+// Move to separate stylesheet if invalid CSS is a problem.
+// 
+
+.clearfix {
+  zoom: 1;
+}
\ No newline at end of file
diff --git a/app/soc/content/less/soc/elements/header.less b/app/soc/content/less/soc/elements/header.less
new file mode 100644
index 0000000..24507b3
--- /dev/null
+++ b/app/soc/content/less/soc/elements/header.less
@@ -0,0 +1,14 @@
+// ==========================================================================
+// header
+// ==========================================================================
+
+.main-header {
+	max-width: 700px;
+	padding: 3.5em 5% 3em;
+	margin: 0 auto;
+	text-align: center;
+
+	p {
+		margin: 0;
+	}
+}
diff --git a/app/soc/content/less/soc/elements/headers-styles.less b/app/soc/content/less/soc/elements/headers-styles.less
new file mode 100644
index 0000000..2506cbd
--- /dev/null
+++ b/app/soc/content/less/soc/elements/headers-styles.less
@@ -0,0 +1,45 @@
+// ==========================================================================
+// h1, h2, h3, etc.
+// ==========================================================================
+
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
+	text-rendering: optimizelegibility;
+}
+
+h1, .h1 {
+	font-size: 2.5em;
+	line-height: 1em;
+	font-weight: 300;
+	margin: 0 0 .2em 0;
+	color: #333333;
+}
+
+h2, .h2 {
+	font-size: 1.5em;
+	line-height: 1.1em;
+	font-weight: 300;
+	margin: 0 0 .2em 0;
+	color: #333333;
+
+}
+
+h3, .h3 {
+	font-size: 1.5em;
+	line-height: 1.2em;
+	font-weight: 300;
+	margin: 0 0 .2em 0;
+	color: #333333;
+
+}
+
+h4, .h4 {
+	font-size: 1em;
+	font-weight: 600;
+}
+
+h5, .h5 {
+	font-size: 0.846em;
+	line-height: 2.09em;
+	text-transform: uppercase;
+	font-weight: 600;
+}
\ No newline at end of file
diff --git a/app/soc/content/less/soc/elements/helper.less b/app/soc/content/less/soc/elements/helper.less
new file mode 100644
index 0000000..a80ff87
--- /dev/null
+++ b/app/soc/content/less/soc/elements/helper.less
@@ -0,0 +1,93 @@
+
+// uncomment this if you're feeling daring
+// * { 
+//   @include box-sizing(border-box);
+// }
+
+img {
+  // for fluid images
+  max-width: 100%;
+  // Remove the gap between images and the bottom of their containers: h5bp.com/i/440
+  vertical-align: middle;
+}
+
+// fluid video
+.fluidvideowrapper {
+  position: relative;
+  padding-bottom: 56.25%;
+  padding-top: 25px;
+  height: 0;
+
+  object, embed, iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// Dont break or wrap text
+.nobr, .together {
+  white-space: nowrap;
+}
+
+// Image replacement
+.ir {
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  /* IE 6/7 fallback */
+  *text-indent: -9999px;
+}
+
+.ir:before {
+  content: "";
+  display: block;
+  width: 0;
+  height: 100%;
+}
+
+// Hide from both screenreaders and browsers: h5bp.com/u
+.hidden {
+  display: none !important;
+  visibility: hidden;
+}
+
+// Hide only visually, but have it available for screenreaders: h5bp.com/v
+.visuallyhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+// Extends the .visuallyhidden class to allow the element to be focusable
+// when navigated to via the keyboard: h5bp.com/p
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  width: auto;
+}
+
+// Hide visually and from screenreaders, but maintain layout
+.invisible {
+  visibility: hidden;
+}
+
+// text alignment
+.text-left   { text-align: left; }
+.text-center { text-align: center; }
+.text-right  { text-align: right; }
+
+.clearfix {
+  .clearfix;
+}
\ No newline at end of file
diff --git a/app/soc/content/less/soc/elements/latest.less b/app/soc/content/less/soc/elements/latest.less
new file mode 100644
index 0000000..95c67c5
--- /dev/null
+++ b/app/soc/content/less/soc/elements/latest.less
@@ -0,0 +1,31 @@
+.latest {
+	max-width: 700px;
+	padding: 1em 5% 3em;
+	margin: 0 auto;
+	text-align: center;
+
+	h3 {
+		margin: 0 0 1em 0;
+	}
+}
+
+.post {
+
+	.date {
+		font-size: .55em;
+		line-height: 1.4em;
+		text-transform: uppercase;
+		letter-spacing: 2.5px;
+		font-weight: 600;
+		color: #999999;
+		margin: 0 0 1em;
+		padding: 0;
+	}
+}
+
+.post-description {
+
+	p {
+		margin-top: 0;
+	}
+}
\ No newline at end of file
diff --git a/app/soc/content/less/soc/elements/link-styles.less b/app/soc/content/less/soc/elements/link-styles.less
new file mode 100644
index 0000000..43556e0
--- /dev/null
+++ b/app/soc/content/less/soc/elements/link-styles.less
@@ -0,0 +1,9 @@
+a, a:link, a:visited, a:active {
+  text-decoration: none;
+  color: @link-color;
+}
+
+a:hover {
+  text-decoration: none;
+  color: @link-color-hover;
+}
\ No newline at end of file
diff --git a/app/soc/content/less/soc/elements/projects.less b/app/soc/content/less/soc/elements/projects.less
new file mode 100644
index 0000000..5b3ba3b
--- /dev/null
+++ b/app/soc/content/less/soc/elements/projects.less
@@ -0,0 +1,350 @@
+// ==========================================================================
+// projects
+// ==========================================================================
+@import "common.less";
+
+.projects {
+	max-width: 460px;
+	margin: 0 auto 2em;
+	position: relative;
+
+	@media @break-medium {
+		width: 960px;
+		max-width: 100%;
+		.clearfix;
+	}
+}
+
+.project {
+	background: white;
+	.box-shadow(rgba(0,0,0,.3) 0 0 6px);
+	position: relative;
+	margin: 0 0 3em 0;
+	text-align: center;
+
+	.no-boxshadow & {
+		border: 1px solid #ccc;
+	}
+
+	&:hover {
+		.box-shadow(rgba(0,0,0,.6) 0 0 6px);
+	}
+
+	.no-boxshadow &:hover {
+		border-color: #aaa;
+	}
+
+	h2 {
+		color: @link-color;
+	}
+
+	a:hover h2 {
+		color: @link-color-hover;
+	}
+
+	@media @break-medium {
+		float: left;
+		width: 460px;
+		margin: 10px;
+	}
+
+	a {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.project-button {
+	font-size: 1.125em;
+	line-height: 1.25em;
+	margin: 0 auto .5em;
+	width: 65px;
+
+	&:before {
+		content:"";
+   		float:left;
+		background: url('@{images_soc_location}/house-icon.svg');
+		width: 18px;
+		height: 18px;
+		padding: 0;
+		margin-right: 8px;
+	}
+
+	.no-svg &:before {
+		background-image: url('@{images_soc_location}/house-icon.png');		
+	}
+
+	.active & {
+		color: @google-orange;
+
+		&:before {
+			background-position: 100%;
+		}
+	}
+
+	a:hover & {
+		&:before {
+			background: url('@{images_soc_location}/house-icon.svg');
+			background-position: 100%;
+		}
+
+	}
+
+	.no-svg a:hover &:before {
+		background-image: url('@{images_soc_location}/house-icon.png');		
+	}
+
+	.active a:hover & {
+		color: @google-blue;
+		&:before {
+			background: url('@{images_soc_location}/house-icon.svg');
+		}		
+	}
+
+	.no-svg .active a:hover &:before {
+		background-image: url('@{images_soc_location}/house-icon.png');		
+	}
+
+}
+
+.project-info {
+	padding: 20px;
+}
+
+.project-description {
+	color: @web-black;
+	margin: 0 20px 2em;
+	font-size: .8em;
+}
+
+.project-image {
+	background: url('@{images_soc_location}/non-bg.png');
+	.background-size(cover);
+	padding: 20px;
+	height: 275px;
+	.box-sizing(border-box);
+
+	img {
+		max-height: 100%;
+	}
+
+	.active & {
+		background: url('@{images_soc_location}/active-bg.jpg');
+		.background-size(cover);
+	}
+
+	a:hover & {
+		background: url('@{images_soc_location}/non-bg-hover.png');
+		.background-size(cover);
+
+		.active & {
+			background: url('@{images_soc_location}/active-bg-hover.png');
+			.background-size(cover);
+		}
+	}
+}
+
+
+.active-banner {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 20px;
+	width: 100px;
+	background: #F19906;
+	.background-image(linear-gradient(top, #FFBD1F, #F19906));
+	color: white;
+	text-align: center;
+	margin: -10px 0 0 0;
+
+	p {
+		font-size: .55em;
+		line-height: 1.4em;
+		text-transform: uppercase;
+		letter-spacing: 2.5px;
+		font-weight: 600;
+		margin: 10px 0 0 0;
+	}
+
+	.triangle-top {
+		background: url('@{images_soc_location}/arrow-top.svg');
+		position: absolute;
+		left: 0;
+		top: 0;
+		margin: 0 0 0 -12px;
+		width: 12px;
+		height: 10px;
+	}
+
+	.no-svg & .triangle-top {
+		background-image: url('@{images_soc_location}/arrow-top.png');
+	}
+
+	.triangle-bottom {
+		background: url('@{images_soc_location}/arrow-bottom.svg');
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		margin: 0 0 -19px 0;
+		width: 100px;
+		height: 19px;	
+	}
+
+	.no-svg & .triangle-bottom {
+		background-image: url('@{images_soc_location}/arrow-bottom.png');
+	}
+
+	.active & {
+		display: block;
+	}
+}
+
+.unactive-description {
+	display: none;
+	margin: 5px 0 0 0;
+}
+
+// special only one of them is active styles
+.one-active {
+
+	@media @break-medium {
+
+		// this makes all projects the size of the small one
+		/////////////////////////////////////////////////////
+		.project {
+			width: 300px; 
+			float: right;
+			margin-top: 70px;
+			min-height: 360px;
+		}
+
+		.project-image {
+			height: 190px;
+		}
+
+		.project-title {
+			padding: 0 10px;
+		}
+		.project-info {
+			padding: 20px 35px 0;
+		}
+		.project-description {
+			margin: 0 0 1.5em 0;
+
+			p {
+				display: none;
+				&.unactive-description {
+					display: block;
+				}
+			}
+		}
+
+		.project-button {
+			font-size: .9em;
+			width: 50px;
+
+			&:before {
+				background: url('@{images_soc_location}/house-icon-small.svg');
+				width: 14px;
+				height: 14px;
+			}
+		}
+
+		.no-svg & .project-button:before {
+			background-image: url('@{images_soc_location}/house-icon-small.png');
+		}
+
+		a:hover .project-button:before {
+			background: url('@{images_soc_location}/img/house-icon-small.svg');
+			width: 14px;
+			height: 14px;
+			background-position: 100%;
+		}
+
+		.no-svg & a:hover .project-button:before {
+			background-image: url('@{images_soc_location}/house-icon-small.png');
+		}
+
+		// this makes the active project look big
+		/////////////////////////////////////////////////////
+		.active {
+
+			&.project {
+				width: 660px;
+				z-index: 100;
+				height: 400px;
+				position: absolute;
+				left: 0;
+				top: 0;
+				margin-top: 10px;
+
+				a {
+					.clearfix;
+				}
+			}
+
+			.project-image {
+				float: left;
+				width: 400px;
+				height: 100%;
+				padding: 50px 40px;
+			}
+
+			.project-info {
+				text-align: left;
+				padding: 50px 20px 20px 420px;
+			}
+
+			.project-title {
+				padding: 0;
+				font-size: 1.95em;
+			}
+
+			.project-description {
+				margin: 0 0 1.5em 0;
+	
+				p {
+					display: block;
+					&.unactive-description {
+						display: none;
+					}
+				}
+			}
+
+			.active-banner {
+				right: 140px;
+			}
+
+			.project-button {
+				position: absolute;
+				bottom: 20px;
+				font-size: 1em;
+				width: 60px;
+
+				&:before {
+					background: url('@{images_soc_location}/house-icon.svg');
+					width: 18px;
+					height: 18px;
+					background-position: 100%;
+				}
+			}
+
+			.no-svg & .project-button:before {
+				background-image: url('@{images_soc_location}/house-icon.png');
+			}
+
+			a:hover .project-button:before {
+				background: url('@{images_soc_location}/house-icon.svg');
+				width: 18px;
+				height: 18px;
+				background-position: 0;
+			}
+
+			.no-svg & a:hover .project-button:before {
+				background-image: url('@{images_soc_location}/house-icon.png');
+			}
+
+		}
+	}
+}
diff --git a/app/soc/content/less/soc/elements/social-media.less b/app/soc/content/less/soc/elements/social-media.less
new file mode 100644
index 0000000..70428d3
--- /dev/null
+++ b/app/soc/content/less/soc/elements/social-media.less
@@ -0,0 +1,61 @@
+.social-media {
+	max-width: 700px;
+	padding: 1em 5% 1.4em;
+	margin: 0 auto;
+	text-align: center;	
+
+	li {
+		&:extend(h3);
+		font-weight: 400;
+		display: inline-block;
+		margin: 4px .5em 0;
+	}
+}
+
+
+.blogger-icon, .google-icon, .email-icon {
+	a {
+		&:extend(.ir); //these styles are in _helper.scss
+		display: block;
+		width: 28px;
+		height: 28px;
+		margin-bottom: -5px;
+	}
+}
+
+.google-icon {
+	a {
+		background: url('@{images_soc_location}/google-icon-sprite.svg');
+		&:hover {
+			background-position: 100%;
+		}
+	}
+
+	.no-svg & a {
+		background-image: url('@{images_soc_location}/google-icon-sprite.png');
+	}
+}
+
+.blogger-icon {
+	a {
+		background: url('@{images_soc_location}/blogger-icon-sprite.svg');
+		&:hover {
+			background-position: 100%;
+		}
+	}
+	.no-svg & a {
+		background-image: url('@{images_soc_location}/blogger-icon-sprite.png');
+	}
+}
+
+.email-icon {
+	a {
+		background: url('@{images_soc_location}/email-icon-sprite.svg');
+		&:hover {
+			background-position: 100%;
+		}
+	}
+	.no-svg & a {
+		background-image: url('@{images_soc_location}/email-icon-sprite.png');
+	}
+}
\ No newline at end of file
diff --git a/app/soc/content/less/soc/ie8-and-down.less b/app/soc/content/less/soc/ie8-and-down.less
new file mode 100644
index 0000000..4f27232
--- /dev/null
+++ b/app/soc/content/less/soc/ie8-and-down.less
@@ -0,0 +1,177 @@
+// ie 8 and down styles!
+
+/* import mixins again */
+@import "mixins";
+
+//all those breakpoint styles
+
+
+// ==========================================================================
+// projects
+// ==========================================================================
+
+
+.projects {
+	width: 960px;
+	max-width: 100%;
+	.clearfix;
+}
+
+.project {
+	float: left;
+	width: 455px;
+	margin: 10px;
+}
+
+.project-image {
+	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{images_soc_location}/non-bg.png', sizingMethod='scale');
+	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{images_soc_location}/non-bg.png', sizingMethod='scale')";
+
+	.active & {
+		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{images_soc_location}/active-bg.jpg', sizingMethod='scale');
+		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{images_soc_location}/active-bg.jpg', sizingMethod='scale')";
+	}
+
+	a:hover & {
+		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{images_soc_location}/non-bg-hover.png', sizingMethod='scale');
+		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{images_soc_location}/non-bg-hover.png', sizingMethod='scale')";
+
+		.active & {
+			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{images_soc_location}/active-bg-hover.png', sizingMethod='scale');
+			-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/active-bg-hover.png', sizingMethod='scale')";
+		}
+	}
+}
+.one-active {
+
+		// this makes all projects the size of the small one
+		/////////////////////////////////////////////////////
+		.project {
+			width: 300px; 
+			float: right;
+			margin-top: 70px;
+			min-height: 360px;
+		}
+
+		.project-image {
+			height: 190px;
+		}
+
+		.project-title {
+			padding: 0 10px;
+		}
+		.project-info {
+			padding: 20px 35px 0;
+		}
+		.project-description {
+			margin: 0 0 1.5em 0;
+
+			p {
+				display: none;
+				&.unactive-description {
+					display: block;
+				}
+			}
+		}
+
+		.project-button {
+			font-size: .9em;
+			width: 50px;
+
+			&:before {
+				background: url('@{images_soc_location}/house-icon-small.png');
+				width: 14px;
+				height: 14px;
+			}
+		}
+
+		a:hover .project-button:before {
+			background: url('@{images_soc_location}/house-icon-small.png');
+			width: 14px;
+			height: 14px;
+			background-position: 100%;
+		}
+
+
+		// this makes the active project look big
+		/////////////////////////////////////////////////////
+		.active {
+
+			&.project {
+				width: 660px;
+				z-index: 100;
+				height: 400px;
+				position: absolute;
+				left: 0;
+				top: 0;
+				margin-top: 10px;
+
+				a {
+					.clearfix;
+				}
+			}
+
+			.project-image {
+				float: left;
+				width: 400px;
+				height: 100%;
+				padding: 50px 40px;
+			}
+
+			.project-info {
+				text-align: left;
+				padding: 50px 20px 20px 420px;
+			}
+
+			.project-title {
+				padding: 0;
+				font-size: 1.95em;
+			}
+
+			.project-description {
+				margin: 0 0 1.5em 0;
+	
+				p {
+					display: block;
+					&.unactive-description {
+						display: none;
+					}
+				}
+			}
+
+			.active-banner {
+				right: 140px;
+			}
+
+			.project-button {
+				position: absolute;
+				bottom: 20px;
+				font-size: 1em;
+				width: 60px;
+
+				&:before {
+					background: url('@{images_soc_location}/house-icon.png');
+					width: 18px;
+					height: 18px;
+					background-position: 100%;
+				}
+			}
+
+			a:hover .project-button:before {
+				background: url('@{images_soc_location}/house-icon.png');
+				width: 18px;
+				height: 18px;
+				background-position: 0;
+			}
+
+		}
+}
+
+
+.main-footer {
+
+	.powered, .empowered {
+		display: inline;
+		margin: 0;
+	}
+}
diff --git a/app/soc/content/less/soc/lesshat.less b/app/soc/content/less/soc/lesshat.less
new file mode 100755
index 0000000..a822a82
--- /dev/null
+++ b/app/soc/content/less/soc/lesshat.less
@@ -0,0 +1,2198 @@
+//  LESS Hat 1.1.2
+//  LESSHat.com
+//  From creators of CSSHat.com
+//  2012
+//  Petr Brzek & Jan Kuca
+
+
+//  @GlobalConfig
+
+//    .animation
+    //    .animation-delay
+    //    .animation-direction
+    //    .animation-duration
+    //    .animation-fill-mode
+    //    .animation-timing-function
+    //    .animation-iteration-count
+    //    .animation-name
+    //    .animation-play-state
+    //    .keyframes - in future
+//    .appearance
+//    .backface-visibility
+//    .background-clip
+//    .background-image
+//    .background-origin
+//    .background-size
+//    .border-radius
+    //    .border-top-left-radius
+    //    .border-top-right-radius
+    //    .border-bottom-left-radius
+    //    .border-bottom-right-radius
+//    .border-image
+//    .box-shadow
+//    .box-sizing
+//    .columns
+    //    .column-count
+    //    .column-gap
+    //    .column-rule
+    //    .column-width
+//    .font-face
+//    .gradient
+//    .opacity
+//    .perspective
+    //    .perspective-origin
+//    .size
+//    .transform
+    //    .transform-origin
+    //    .transform-style
+    //    .translate
+    //    .translate3d
+    //    .translateX
+    //    .translateY
+    //    .translateZ
+    //    .scale
+    //    .scale3d
+    //    .scaleX
+    //    .scaleY
+    //    .scaleZ
+    //    .rotate
+    //    .rotate3d
+    //    .rotateX
+    //    .rotateY
+    //    .rotateZ
+    //    .skew
+    //    .skewX
+    //    .skewY
+//    .transition
+    //    .transition-property
+    //    .transition-duration
+    //    .transition-timing-function
+    //    .transition-delay
+//    .user-select
+//    DEPRECATED mixins
+
+
+//  @GlobalConfig
+
+  // Config supported browsers for your project
+
+    @w3c: true; // Unprefixed W3C syntax
+    @webkit: true; // Chrome 7+, Safari 5+, iOS5, Android
+    @moz: true; //  Firefox 4+
+    @opera: true; // Opera 10.5+
+    @ms: true;  // IE 10+
+
+  // Signals
+
+    @webkitSignal: 1;
+    @mozSignal: 2;
+    @operaSignal: 3;
+    @msSignal: 4;
+    @w3cSignal: 5;
+
+// .animation
+
+  .animation(...){
+
+    //  Local config for disabling properties
+
+    @w3cLocal: true; // Unprefixed W3C syntax
+    @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+    @mozLocal: true; //  Firefox 4+
+    @operaLocal: true; // Opera 10.5+
+    @msLocal: true;  // IE 10+
+
+    @processing: ~`(function(){ var arg = "@{arguments}".replace("[","").replace("]","") || "none"; if( !/^\w*([ X])/.test(arg) ) { arg = arg.replace(/,/g,"") } return arg; })()`;
+
+    .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+      .inception (@signal, @arguments) when (@signal = 1) { -webkit-animation: @processing;}
+      .inception (@signal, @arguments) when (@signal = 2) { -moz-animation: @processing;}
+      .inception (@signal, @arguments) when (@signal = 3) { -o-animation: @processing;}
+      .inception (@signal, @arguments) when (@signal = 4) { -ms-animation: @processing;}
+      .inception (@signal, @arguments) when (@signal = 5) { animation: @processing;}
+      .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+      .inception(@signal, @arguments);
+    }
+    .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+   //  element{ .animation(nameAnimation 2s linear alternate anim 3s linear alternate ); }
+
+
+  //  .animation-delay
+
+  .animation-delay(...){
+
+    //  Local config for disabling properties
+
+    @w3cLocal: true; // Unprefixed W3C syntax
+    @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+    @mozLocal: true; //  Firefox 4+
+    @operaLocal: true; // Opera 10.5+
+    @msLocal: true;  // IE 10+
+
+    @processing: ~`(function(){ var arg = "@{arguments}" || "0"; arg = arg.replace("[","").replace("]",""); return arg; }())`;
+
+    .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+      .inception (@signal, @arguments) when (@signal = 1) { -webkit-animation-delay: @processing;}
+      .inception (@signal, @arguments) when (@signal = 2) { -moz-animation-delay: @processing;}
+      .inception (@signal, @arguments) when (@signal = 3) { -o-animation-delay: @processing;}
+      .inception (@signal, @arguments) when (@signal = 4) { -ms-animation-delay: @processing;}
+      .inception (@signal, @arguments) when (@signal = 5) { animation-delay: @processing;}
+      .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+      .inception(@signal, @arguments);
+    }
+    .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .animation-delay(1s); }
+    //  element{ .animation-delay(750ms, 2s, 3s); } // For multiple animation-direction
+
+
+  //  .animation-direction
+
+    .animation-direction(...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      @processing: ~`(function(){ var arg = "@{arguments}" || "normal"; arg = arg.replace("[","").replace("]",""); return arg; }())`;
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-animation-direction: @processing;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-animation-direction: @processing;}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-animation-direction: @processing;}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-animation-direction: @processing;}
+        .inception (@signal, @arguments) when (@signal = 5) { animation-direction: @processing;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .animation-direction(); }
+    //  element{ .animation-direction(normal, alternate); }
+
+
+  //  .animation-duration
+
+    .animation-duration(...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      @processing: ~`(function(){ var arg = "@{arguments}" || "0"; arg = arg.replace("[","").replace("]",""); return arg; }())`;
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-animation-duration: @processing;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-animation-duration: @processing;}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-animation-duration: @processing;}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-animation-duration: @processing;}
+        .inception (@signal, @arguments) when (@signal = 5) { animation-duration: @processing;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .animation-duration(2s); }
+
+
+  //  .animation-fill-mode
+
+    .animation-fill-mode(...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      @processing: ~`(function(){ var arg = "@{arguments}" || "none"; arg = arg.replace("[","").replace("]",""); return arg; }())`;
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-animation-fill-mode: @processing;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-animation-fill-mode: @processing;}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-animation-fill-mode: @processing;}
+        .inception (@signal, @arguments) when (@signal = 5) { animation-fill-mode: @processing;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .animation-fill-mode(forwards); }
+
+
+  //  .animation-timing-function
+
+    .animation-timing-function(...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      @processing: ~`(function(){ var arg = "@{arguments}" || "ease"; arg = arg.replace("[","").replace("]",""); return arg; }())`;
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-animation-timing-function: @processing;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-animation-timing-function: @processing;}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-animation-timing-function: @processing;}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-animation-timing-function: @processing;}
+        .inception (@signal, @arguments) when (@signal = 5) { animation-timing-function: @processing;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+    }
+
+    //  element{ .animation-timing-function(ease-in-out); }
+
+
+  //  .animation-iteration-count
+
+    .animation-iteration-count(...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      @processing: ~`(function(){ var arg = "@{arguments}" || "0"; arg = arg.replace("[","").replace("]",""); return arg; }())`;
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-animation-iteration-count: @processing;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-animation-iteration-count: @processing;}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-animation-iteration-count: @processing;}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-animation-iteration-count: @processing;}
+        .inception (@signal, @arguments) when (@signal = 5) { animation-iteration-count: @processing;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+    }
+
+      //  element{ .animation-iteration-count(3); }
+
+
+  //  .animation-name
+
+    .animation-name(...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      @processing: ~`(function(){ var arg = "@{arguments}" || "none"; arg = arg.replace("[","").replace("]",""); return arg; }())`;
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-animation-name: @processing;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-animation-name: @processing;}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-animation-name: @processing;}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-animation-name: @processing;}
+        .inception (@signal, @arguments) when (@signal = 5) { animation-name: @processing;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+    }
+
+      //  element{ .animation-name(myReallyCoolAnimationName); }
+
+
+  //  .animation-play-state
+
+    .animation-play-state(...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      @processing: ~`(function(){ var arg = "@{arguments}" || "running"; arg = arg.replace("[","").replace("]",""); return arg; }())`;
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-animation-play-state: @processing;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-animation-play-state: @processing;}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-animation-play-state: @processing;}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-animation-play-state: @processing;}
+        .inception (@signal, @arguments) when (@signal = 5) { animation-play-state: @processing;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+    }
+
+      //  element{ .animation-play-state(paused); }
+
+
+//  .appearance
+
+  .appearance(@argument:none){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @argument) when (@signal = 1) { -webkit-appearance: @argument;}
+        .inception (@signal, @argument) when (@signal = 2) { -moz-appearance: @argument;}
+        .inception (@signal, @argument) when (@signal = 5) { appearance: @argument;}
+        .inception (@signal, @argument) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @argument);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .appearance(button); }
+
+
+//  .backface-visibility
+
+  .backface-visibility(@argument:visible){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @argument) when (@signal = 1) { -webkit-backface-visibility: @argument;}
+        .inception (@signal, @argument) when (@signal = 2) { -moz-backface-visibility: @argument;}
+        .inception (@signal, @argument) when (@signal = 5) { backface-visibility: @argument;}
+        .inception (@signal, @argument) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @argument);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .backface-visibility(hidden); }
+
+
+//  .background-clip
+
+  .background-clip(@arguments:border-box){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-background-clip: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-background-clip: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { background-clip: @arguments;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .background-clip(padding-box); }
+
+
+//  .background-image
+
+  .background-image(...){
+
+      //  Local config for disabling properties
+
+      @svg: true; //  SVG gradient for IE9
+      @mozLocal: true; //  Firefox 4+
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5+, Android
+      @operaLocal: true; // Opera 10.5+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      
+      @backgroundSVG: ~`(function(){function K(a){var b="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",c,d,e,f,g,h,i,j,k=0,l=0,m="",n=[];if(!a)return a;do c=a.charCodeAt(k++),d=a.charCodeAt(k++),e=a.charCodeAt(k++),j=c<<16|d<<8|e,f=j>>18&63,g=j>>12&63,h=j>>6&63,i=j&63,n[l++]=b.charAt(f)+b.charAt(g)+b.charAt(h)+b.charAt(i);while(k<a.length);m=n.join("");var o=a.length%3;return(o?m.slice(0,o-3):m)+"===".slice(o||3)}String.prototype.trim===undefined&&(String.prototype.trim=function(){return this.replace(/^\s+/,"").replace(/\s+$/,"")});var a="@{arguments}",b=null,c=!0,d=a.split(/,(?=\s*(?:linear|radial))/g),e=d.length,f=/top/,g=/right/,h=/bottom/,i=/left/,j=/to\s*top/,k=/to\s*right/,l=/to\s*bottom/,m=/to\s*left/,n=/45deg/,o=/-45deg/,p=/\d*deg/;for(var q=0;q<e;q++){if(/linear/.test(d[q])){d[q]=d[q].replace(/linear-gradient\s*\(/,'<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">');if(f.test(d[q])&&!j.test(d[q])||l.test(d[q])||/180deg/.test(d[q])){var r=null;l.test(d[q])?r=l:/180deg/.test(d[q])?r=/180deg/:r=f,d[q]=d[q].replace(r,'<linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">')}else if(g.test(d[q])&&!k.test(d[q])||m.test(d[q])||/270deg/.test(d[q])){var r=null;m.test(d[q])?r=m:/270deg/.test(d[q])?r=/270deg/:r=g,d[q]=d[q].replace(r,'<linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="100%" y1="0%" x2="0%" y2="0%">')}else if(h.test(d[q])&&!l.test(d[q])||j.test(d[q])||/[^\d]0deg/.test(d[q])){var r=null;j.test(d[q])?r=j:/0deg/.test(d[q])?r=/0deg/:r=h,d[q]=d[q].replace(r,'<linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="100%" x2="0%" y2="0%">')}else if(i.test(d[q])&&!m.test(d[q])||k.test(d[q])||/90deg/.test(d[q])){var r=null;k.test(d[q])?r=k:/90deg/.test(d[q])?r=/90deg/:r=i,d[q]=d[q].replace(r,'<linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">')}else n.test(d[q])&&!o.test(d[q])?d[q]=d[q].replace(n,'<linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="100%" x2="100%" y2="0%">'):o.test(d[q])?d[q]=d[q].replace(o,'<linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%">'):c=!1}try{"".trim(),b=!0}catch(s){b=!1}b&&(d[q]=d[q].trim());if(/linear/.test(d[q])||/radial/.test(d[q])){d[q]=d[q].slice(0,-1),d[q]="url(data:image/svg+xml;base64--"+d[q]+'</linearGradient><rect x="0" y="0" width="1" height="1" fill="url(***)" /></svg>)';var t=d.join("@@@"),u=t.match(/rgba?\(\d+,\s*\d+,\s*\d+,\s*(?:0|1|\.\d+|0\.\d+)\)\s*\d*%*/g)||0,v=t.match(/hsla?\(\d+,\s*\d+%,\s*\d+%,\s*(?:0|1|\.\d+|0\.\d+)\)\s*\d*%*/g)||0,w=[],x=[];for(var y=0;y<u.length;y++)w[y]=u[y].replace(/,/g,"--");for(var z=0;z<v.length;z++)x[z]=v[z].replace(/,/g,"--");for(var A=0;A<u.length;A++)t=t.replace(u[A],w[A]);for(var B=0;B<v.length;B++)t=t.replace(v[B],x[B]);var C=t.split(","),D=0;for(var E=0;E<C.length;E++){C[E]=C[E].replace(/(#\w{3,6})\s*(\d*.?\d*%)?/g,'<stop offset="$2" stop-color="$1" stop-opacity="1"/>').replace(/(rgba?\(\d+--\s*\d+--\s*\d+--\s*(0|1|\.\d+|0\.\d+)\))\s*(\d*.?\d*%)*/g,'<stop offset="$3" stop-color="$1" stop-opacity="$2"/>').replace(/rgba/g,"rgb").replace(/(hsla?\(\d+--\s*\d+%--\s*\d+%--\s*(0|1|\.\d+|0\.\d+)\))\s*(\d*.?\d*%)*/g,'<stop offset="$3" stop-color="$1" stop-opacity="$2"/>').replace(/hsla/g,"hsl").replace(/((?:aqua|black|blue|fuchsia|gray|grey|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow))\s*(\d*%)*/g,'<stop offset="$2" stop-color="$1" stop-opacity="1"/>').replace(/\*\*\*/,"#grad-ucgg-generated");try{"".trim(),b=!0}catch(s){b=!1}b&&(C[E]=C[E].trim());if(/offset=""/g.test(C[E])){var F=C.length-2,G=Math.round(100/F)*D;var H='offset="'+G+'%"';C[E]=C[E].replace(/offset=""/,H),D++}}C=C.toString().replace(/,/g,"").replace(/--/g,",").replace(/(rgb?\(\d+,\s*\d+,\s*\d+),\s*(?:0|1|\.\d+|0\.\d+)\)/g,"$1)").replace(/(hsl?\(\d+,\s*\d+%,\s*\d+%),\s*(?:0|1|\.\d+|0\.\d+)\)/g,"$1)")}}/radial/.test(C)&&(/((ellipse).*(center)|(circle).*(center))/g.test(C)?C=C.replace(/<\/linearGradient>/g,"</radialGradient>").replace(/radial-gradient[^<]+/g,'<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><radialGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" cx="50%" cy="50%" r="75%">').replace(/<rect x=\S+\d\S+ y=\S+\d\S+ width=\S+\d\S+ height=\S+\d\S+ fill=\S+\w\S+ \/>/g,'<rect x="-50" y="-50" width="101" height="101" fill="url(#grad-ucgg-generated)" />'):C=!1);var I=null;try{C=C.split("@@@");var J=0;for(J;J<C.length;J++)I=C[J].match(/<\?xml.*<\/svg>/),I=K(I.join("")),C[J]=C[J].replace(/(<\?xml.*<\/svg>)/,I)}catch(s){}return c?C:C=!1,C?C.toString():C})()`;
+      @backgroundMoz: ~`(function(){var a,b,c,d,e,f,g,h,i,j,k;a="@{arguments}",c=null,d=a.split(/,(?=\s*(?:linear|radial))/g),e=d.length,k=/to\s*top/,j=/to\s*right/,h=/to\s*bottom/,i=/to\s*left/,b=/\d*deg/,f=0;while(f<e){/linear/.test(d[f])?(d[f]=d[f].replace(/linear-gradient/,"-moz-linear-gradient"),k.test(d[f])?d[f]=d[f].replace(k,"bottom"):j.test(d[f])?d[f]=d[f].replace(j,"left"):h.test(d[f])?d[f]=d[f].replace(h,"top"):i.test(d[f])?d[f]=d[f].replace(i,"right"):b.test(d[f])&&(g=d[f].match(/\d*deg/),g=(parseInt(g)-90)*-1+"deg",d[f]=d[f].replace(b,g))):d[f]=d[f].replace(/radial-gradient/,"-moz-radial-gradient").replace(/,\s* \d*(px|%) \d*(px|%)/,", circle").replace(/\(+\s*(.*) at\s*([^,]+)/g,"($2, $1");try{"".trim(),c=!0}catch(l){c=!1}c&&(d[f]=d[f].trim()),f++}return d.toString().replace(/\[/g,"").replace(/\]/g,"")}())`;
+      @backgroundWebkit: ~`(function(){var a,b,c,d,e,f,g,h,i,j,k;a="@{arguments}",c=null,d=a.split(/,(?=\s*(?:linear|radial))/g),e=d.length,k=/to\s*top/,j=/to\s*right/,h=/to\s*bottom/,i=/to\s*left/,b=/\d*deg/,f=0;while(f<e){/linear/.test(d[f])?(d[f]=d[f].replace(/linear-gradient/,"-webkit-linear-gradient"),k.test(d[f])?d[f]=d[f].replace(k,"bottom"):j.test(d[f])?d[f]=d[f].replace(j,"left"):h.test(d[f])?d[f]=d[f].replace(h,"top"):i.test(d[f])?d[f]=d[f].replace(i,"right"):b.test(d[f])&&(g=d[f].match(/\d*deg/),g=(parseInt(g)-90)*-1+"deg",d[f]=d[f].replace(b,g))):d[f]=d[f].replace(/radial-gradient/,"-webkit-radial-gradient").replace(/\(+\s*(.*) at\s*([^,]+)/g,"($2, $1");try{"".trim(),c=!0}catch(l){c=!1}c&&(d[f]=d[f].trim()),f++}return d.toString().replace(/\[/g,"").replace(/\]/g,"");}())`;
+      @backgroundOpera: ~`(function(){var a,b,c,d,e,f,g,h,i,j,k;a="@{arguments}",c=null,d=a.split(/,(?=\s*(?:linear|radial))/g),e=d.length,k=/to\s*top/,j=/to\s*right/,h=/to\s*bottom/,i=/to\s*left/,b=/\d*deg/,f=0;while(f<e){/linear/.test(d[f])?(d[f]=d[f].replace(/linear-gradient/,"-o-linear-gradient"),k.test(d[f])?d[f]=d[f].replace(k,"bottom"):j.test(d[f])?d[f]=d[f].replace(j,"left"):h.test(d[f])?d[f]=d[f].replace(h,"top"):i.test(d[f])?d[f]=d[f].replace(i,"right"):b.test(d[f])&&(g=d[f].match(/\d*deg/),g=(parseInt(g)-90)*-1+"deg",d[f]=d[f].replace(b,g))):d[f]=d[f].replace(/radial-gradient/,"-o-radial-gradient").replace(/\(+\s*(.*) at\s*([^,]+)/g,"($2, $1");try{"".trim(),c=!0}catch(l){c=!1}c&&(d[f]=d[f].trim()),f++}return d.toString().replace(/\[/g,"").replace(/\]/g,"");})()`;
+      @backgroundW3C: ~`(function(){var a,b,c,d,e;a="@{arguments}",b=null,c=a.split(/,(?=\s*(?:linear|radial))/g),d=c.length,e=0;while(e<d){try{"".trim(),b=!0}catch(f){b=!1}b&&(c[e]=c[e].trim()),e++}return c.toString().replace(/\[/g,"").replace(/\]/g,"");}())`;
+
+      .result(@arguments, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) { background-image: @arguments; }
+      .result(@arguments, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+      .result(@arguments, @boolean, @localBoolean, @property) when (@boolean = true) and (@localBoolean = true) and (isstring(@property)) { background-image: @arguments; }
+      .result(@arguments, @boolean, @localBoolean, @property) when not (@boolean = true), not (@localBoolean = true), not (isstring(@property)) { }
+
+      .result(@backgroundSVG, @svg, @svg, @backgroundSVG);
+      // --  this comment must be here because of LESS bug
+      .result(@backgroundMoz, @moz, @mozLocal);
+      // --
+      .result(@backgroundWebkit, @webkit, @webkitLocal);
+      // --
+      .result(@backgroundOpera, @opera, @operaLocal);
+      // --
+      .result(@backgroundW3C, @w3c, @w3cLocal);
+  }
+
+   //  element{ .background-image(linear-gradient(to bottom, #ffffff, #929292)); }
+
+
+//  .background-origin
+
+  .background-origin(@arguments:padding-box){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-background-origin: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-background-origin: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { background-origin: @arguments;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .background-origin(content-box); }
+
+
+//  .background-size
+
+  .background-size(...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      @processing: ~`(function(){ var arg = "@{arguments}".replace("[","").replace("]","") || "none"; if( !/^\w*%?([ X])/.test(arg) ) { arg = arg.replace(/,/g,"") } return arg; })()`;
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-background-size: @processing;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-background-size: @processing;}
+        .inception (@signal, @arguments) when (@signal = 5) { background-size: @processing;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+   //   element{ .background-size(50% auto); }
+
+
+// .border-radius
+
+  .border-radius(@arguments:0) {
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-border-radius: @arguments; -webkit-background-clip: padding-box;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-border-radius: @arguments; -moz-background-clip: padding;}
+        .inception (@signal, @arguments) when (@signal = 5) { border-radius: @arguments; background-clip: padding-box; }
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .border-radius(10px); } //  all corner rounded
+    //  element{ .border-radius(~"10px / 20px"); } //  NEED TO BE ESCAPED OR LESS DEVIDE IT! Horizontal and vertical rounded differently
+    //  element{ .border-radius(0 10px 0 0); } // only top right corner rounded
+
+
+// .border-top-left-radius
+
+  .border-top-left-radius(@arguments:0) {
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-border-top-left-radius: @arguments; -webkit-background-clip: padding-box;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-border-radius-topleft: @arguments; -moz-background-clip: padding;}
+        .inception (@signal, @arguments) when (@signal = 5) { border-top-left-radius: @arguments; background-clip: padding-box; }
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .border-top-left-radius(10px); }
+
+
+// .border-top-right-radius
+
+  .border-top-right-radius(@arguments:0) {
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-border-top-right-radius: @arguments; -webkit-background-clip: padding-box;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-border-radius-topright: @arguments; -moz-background-clip: padding;}
+        .inception (@signal, @arguments) when (@signal = 5) { border-top-right-radius: @arguments; background-clip: padding-box; }
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .border-top-right-radius(10px); }
+
+
+// .border-bottom-left-radius
+
+  .border-bottom-left-radius(@arguments:0) {
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-border-bottom-left-radius: @arguments; -webkit-background-clip: padding-box;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-border-radius-bottomleft: @arguments; -moz-background-clip: padding;}
+        .inception (@signal, @arguments) when (@signal = 5) { border-bottom-left-radius: @arguments; background-clip: padding-box; }
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .border-bottom-left-radius(10px); }
+
+
+// .border-bottom-right-radius
+
+  .border-bottom-right-radius(@arguments:0) {
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-border-bottom-right-radius: @arguments; -webkit-background-clip: padding-box;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-border-radius-bottomright: @arguments; -moz-background-clip: padding;}
+        .inception (@signal, @arguments) when (@signal = 5) { border-bottom-right-radius: @arguments; background-clip: padding-box; }
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .border-bottom-right-radius(10px); }
+
+
+// .border-image
+
+  .border-image(@arguments:none){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-border-image: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-border-image: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-border-image: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { border-image: @arguments; }
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .border-image(url(border.png) 30 30 round); }
+
+
+//  .box-shadow
+
+  .box-shadow(...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      @processing: ~`(function(){ var arg = "@{arguments}".replace("[","").replace("]","") || "none"; if( !/^#?\w*%?([ X])/.test(arg) ) { arg = arg.replace(/,(?=[^()]*\))/g,'--').replace(/,/g,"").replace(/--/g,','); } return arg; })()`;
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-box-shadow: @processing;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-box-shadow: @processing;}
+        .inception (@signal, @arguments) when (@signal = 5) { box-shadow: @processing;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+   //   element{ .box-shadow(0 1px 10px rgba(20,20,20,0.5), 0 1px 10px rgba(20,20,20,0.5)); }
+
+
+//  .box-sizing
+
+  .box-sizing(@arguments:content-box){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-box-sizing: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-box-sizing: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { box-sizing: @arguments;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .box-sizing(border-box); }
+
+
+//  .columns
+
+  .columns(@arguments:auto auto){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-columns: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-columns: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { columns: @arguments;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .columns(100px 3); }
+
+
+//  .column-count
+
+  .column-count(@arguments:auto){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-column-count: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-column-count: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { column-count: @arguments;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .column-count(3); }
+
+
+//  .column-gap
+
+  .column-gap(@arguments:normal){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-column-gap: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-column-gap: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { column-gap: @arguments;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .column-gap(40px); }
+
+
+//  .column-rule
+
+  .column-rule(@arguments:medium none black){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-column-rule: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-column-rule: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { column-rule: @arguments;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .column-rule(3px outset #ff00ff); }
+
+
+//  .column-width
+
+  .column-width(@arguments:auto){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-column-width: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-column-width: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { column-width: @arguments;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .column-width(100px); }
+
+
+//  .font-face
+
+  .font-face(@fontname, @fontfile) {
+
+    font-family: "@{fontname}";
+    src: url("@{fontfile}-webfont.eot");
+    src: url("@{fontfile}-webfont.eot?#iefix") format("embedded-opentype"),
+         url("@{fontfile}-webfont.woff") format("woff"),
+         url("@{fontfile}-webfont.ttf") format("truetype"),
+         url("@{fontfile}-webfont.svg#@{fontname}") format("svg");
+    font-weight: normal;
+    font-style: normal;
+  }
+
+    //  element{  .font-face(ZendaRegular, zenda-webfont); }
+
+
+//  .opacity
+
+  .opacity(@arguments:1){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-opacity: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-opacity: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { opacity: @arguments;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .opacity(.5); }
+
+
+//  .perspective
+
+  .perspective(@arguments:none){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-perspective: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-perspective: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { perspective: @arguments;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .perspective(350px); }
+
+
+//  .perspective-origin
+
+  .perspective-origin(@arguments:50% 50%){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-perspective-origin: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-perspective-origin: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { perspective-origin: @arguments;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .perspective-origin(top left); }
+
+
+//  .size
+
+  .size(@square){
+    width: @square;
+    height: @square;
+  }
+
+  .size(@width, @height){
+    width: @width;
+    height: @height;
+  }
+
+    //  element{ .size(10px); } // render width:10px; height:10px;
+    //  element{ .size(10px, 20px); } // render width:10px; height: 20px;
+
+
+//  .transform
+
+  .transform(@arguments:none, ...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: @arguments;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .transform(scale(.5) translate(10px, 20px)); }
+
+
+//  .transform-origin
+
+  .transform-origin(@arguments:50% 50% 0){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform-origin: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform-origin: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform-origin: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform-origin: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { transform-origin: @arguments;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .transform-origin(20% 40%); }
+
+
+//  .transform-style
+
+  .transform-style(@arguments:flat){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform-style: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform-style: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform-style: @arguments;}
+        .inception (@signal, @arguments) when (@signal = 5) { transform-style: @arguments;}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .transform-style(preserve-3d); }
+
+
+//  .translate
+
+  .translate(@x:0, @y:0){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: translate(@x, @y);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: translate(@x, @y);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: translate(@x, @y);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: translate(@x, @y);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: translate(@x, @y);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{  .translate(100px);  }
+    //  element{  .translate(100px, 50px);  }
+
+
+//  .translate3d
+
+  .translate3d(@x:0, @y:0, @z:0){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: translate3d(@x, @y, @z);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: translate3d(@x, @y, @z);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: translate3d(@x, @y, @z);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: translate3d(@x, @y, @z);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: translate3d(@x, @y, @z);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .translate3d(10px, 20px, 30px); }
+
+
+//  .translateX
+
+  .translateX(@x:0){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: translateX(@x);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: translateX(@x);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: translateX(@x);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: translateX(@x);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: translateX(@x);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .translateX(10px); }
+
+
+//  .translateY
+
+  .translateY(@y:0){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: translateY(@y);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: translateY(@y);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: translateY(@y);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: translateY(@y);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: translateY(@y);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .translateY(15px); }
+
+
+//  .translateZ
+
+  .translateZ(@z:0){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: translateZ(@z);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: translateZ(@z);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: translateZ(@z);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: translateZ(@z);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: translateZ(@z);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .translateZ(32px); }
+
+
+//  .scale
+
+    .scale(@x:1){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: scale(@x);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: scale(@x);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: scale(@x);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: scale(@x);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: scale(@x);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+  .scale(@x, @y){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: scale(@x, @y);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: scale(@x, @y);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: scale(@x, @y);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: scale(@x, @y);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: scale(@x, @y);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+      //  element{ .scale(2); }
+      //  element{ .scale(2, 1); }
+
+
+//  .scale3d
+
+    .scale3d(@x:1, @y:1, @z:1){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: scale3d(@x, @y, @z);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: scale3d(@x, @y, @z);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: scale3d(@x, @y, @z);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: scale3d(@x, @y, @z);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: scale3d(@x, @y, @z);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+      //  element{ .scale3d(1, 2, 1); }
+
+
+//  .scaleX
+
+    .scaleX(@x:1){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: scaleX(@x);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: scaleX(@x);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: scaleX(@x);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: scaleX(@x);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: scaleX(@x);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+      //  element{ .scaleX(1.5); }
+
+
+//  .scaleY
+
+    .scaleY(@y:1){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: scaleY(@y);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: scaleY(@y);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: scaleY(@y);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: scaleY(@y);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: scaleY(@y);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+      //  element{ .scaleX(1.5); }
+
+
+//  .scaleZ
+
+    .scaleZ(@z:1){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: scaleZ(@z);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: scaleZ(@z);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: scaleZ(@z);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: scaleZ(@z);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: scaleZ(@z);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+      //  element{ .scaleZ(2.7); }
+
+
+//  .rotate
+
+  .rotate(@angle:0){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: rotate(@angle);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: rotate(@angle);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: rotate(@angle);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: rotate(@angle);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: rotate(@angle);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .rotate(45deg); }
+
+
+//  .rotate3d
+
+  .rotate3d(@x:0, @y:0, @z: 0, @angle:0){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: rotate3d(@x, @y, @z, @angle);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: rotate3d(@x, @y, @z, @angle);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: rotate3d(@x, @y, @z, @angle);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: rotate3d(@x, @y, @z, @angle);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: rotate3d(@x, @y, @z, @angle);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .rotate3d(1, 2.0, 3.0, 10deg); }
+
+
+//  .rotateX
+
+  .rotateX(@angle:0){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: rotateX(@angle);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: rotateX(@angle);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: rotateX(@angle);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: rotateX(@angle);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: rotateX(@angle);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .rotateX(63deg); }
+
+
+//  .rotateY
+
+  .rotateY(@angle:0){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: rotateY(@angle);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: rotateY(@angle);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: rotateY(@angle);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: rotateY(@angle);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: rotateY(@angle);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .rotateY(24deg); }
+
+
+//  .rotateZ
+
+  .rotateZ(@angle:0){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: rotateZ(@angle);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: rotateZ(@angle);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: rotateZ(@angle);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: rotateZ(@angle);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: rotateZ(@angle);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .rotateZ(280deg); }
+
+
+//  .skew
+
+  .skew(@angle:0){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: skew(@angle);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: skew(@angle);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: skew(@angle);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: skew(@angle);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: skew(@angle);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .skew(20deg); }
+
+
+//  .skewX
+
+  .skewX(@angle:0){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: skewX(@angle);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: skewX(@angle);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: skewX(@angle);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: skewX(@angle);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: skewX(@angle);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .skewX(24deg); }
+
+
+//  .skewY
+
+  .skewY(@angle:0){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transform: skewY(@angle);}
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transform: skewY(@angle);}
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transform: skewY(@angle);}
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transform: skewY(@angle);}
+        .inception (@signal, @arguments) when (@signal = 5) { transform: skewY(@angle);}
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .skewY(36deg); }
+
+
+//  .transition
+
+  .transition(...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      @transitionWebkit: ~`(function(){var a,b,c,d,e,f,g;a="@{arguments}".split(","),c=["background-size","border-","box-shadow","column","transform"],d=c.length,e=a,f=!1,b=a.length;for(var h=0;h<d;h++)for(var i=0;i<b;i++){g=new RegExp(c[h],"g");try{"".trim(),f=!0}catch(j){f=!1}a[i]=f?a[i].trim():a[i],g.test(a[i])&&(e[i]=a[i].replace(g,"-webkit-"+c[h]))}return e.join(", ").replace("[","").replace("]","");}())`;
+      @transitionMoz: ~`(function(){var a,b,c,d,e,f,g;a="@{arguments}".split(","),c=["background-size","border-","box-shadow","column","transform"],d=c.length,e=a,f=!1,b=a.length;for(var h=0;h<d;h++)for(var i=0;i<b;i++){g=new RegExp(c[h],"g");try{"".trim(),f=!0}catch(j){f=!1}a[i]=f?a[i].trim():a[i],g.test(a[i])&&(e[i]=a[i].replace(g,"-moz-"+c[h]))}return e.join(", ").replace("[","").replace("]","");}())`;
+      @transitionOpera: ~`(function(){var a,b,c,d,e,f,g;a="@{arguments}".split(","),c=["transform"],d=c.length,e=a,f=!1,b=a.length;for(var h=0;h<d;h++)for(var i=0;i<b;i++){g=new RegExp(c[h],"g");try{"".trim(),f=!0}catch(j){f=!1}a[i]=f?a[i].trim():a[i],g.test(a[i])&&(e[i]=a[i].replace(g,"-o-"+c[h]))}return e.join(", ").replace("[","").replace("]","");}())`;
+      @transitionMs: ~`(function(){var a,b,c,d,e,f,g;a="@{arguments}".split(","),c=["transform"],d=c.length,e=a,f=!1,b=a.length;for(var h=0;h<d;h++)for(var i=0;i<b;i++){g=new RegExp(c[h],"g");try{"".trim(),f=!0}catch(j){f=!1}a[i]=f?a[i].trim():a[i],g.test(a[i])&&(e[i]=a[i].replace(g,"-ms-"+c[h]))}return e.join(", ").replace("[","").replace("]","");}())`;
+      @transitionW3C: ~`(function(){var a,b,c;a="@{arguments}".split(","),c=!1,b=a.length;for(var d=0;d<b;d++){try{"".trim(),c=!0}catch(e){c=!1}a[d]=c?a[d].trim():a[d]}return a.join(", ").replace("[","").replace("]","");}())`;
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transition: ~`(function(){ var arg = "@{transitionWebkit}" || "all 0 ease 0"; if( !/^\w*([ X])/.test(arg) ) { arg = arg.replace(/,/g,"") } return arg; })()`; }
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transition: ~`(function(){ var arg = "@{transitionMoz}" || "all 0 ease 0"; if( !/^\w*([ X])/.test(arg) ) { arg = arg.replace(/,/g,"") } return arg; })()`; }
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transition:~`(function(){ var arg = "@{transitionOpera}" || "all 0 ease 0"; if( !/^\w*([ X])/.test(arg) ) { arg = arg.replace(/,/g,"") } return arg; })()`; }
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transition: ~`(function(){ var arg = "@{transitionMs}" || "all 0 ease 0"; if( !/^\w*([ X])/.test(arg) ) { arg = arg.replace(/,/g,"") } return arg; })()`; }
+        .inception (@signal, @arguments) when (@signal = 5) { transition: ~`(function(){ var arg = "@{transitionW3C}" || "all 0 ease 0"; if( !/^\w*([ X])/.test(arg) ) { arg = arg.replace(/,/g,"") } return arg; })()`; }
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+  //   element{ .transition(transform 3s linear); }
+
+
+//  .transition-property
+
+  .transition-property(...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      @transitionWebkit: ~`(function(){var a,b,c,d,e,f,g;a="@{arguments}".split(","),c=["background-size","border-","box-shadow","column","transform"],d=c.length,e=a,f=!1,b=a.length;for(var h=0;h<d;h++)for(var i=0;i<b;i++){g=new RegExp(c[h],"g");try{"".trim(),f=!0}catch(j){f=!1}a[i]=f?a[i].trim():a[i],g.test(a[i])&&(e[i]=a[i].replace(g,"-webkit-"+c[h]))}return e.join(", ").replace("[","").replace("]","");}())`;
+      @transitionMoz: ~`(function(){var a,b,c,d,e,f,g;a="@{arguments}".split(","),c=["background-size","border-","box-shadow","column","transform"],d=c.length,e=a,f=!1,b=a.length;for(var h=0;h<d;h++)for(var i=0;i<b;i++){g=new RegExp(c[h],"g");try{"".trim(),f=!0}catch(j){f=!1}a[i]=f?a[i].trim():a[i],g.test(a[i])&&(e[i]=a[i].replace(g,"-moz-"+c[h]))}return e.join(", ").replace("[","").replace("]","");}())`;
+      @transitionOpera: ~`(function(){var a,b,c,d,e,f,g;a="@{arguments}".split(","),c=["transform"],d=c.length,e=a,f=!1,b=a.length;for(var h=0;h<d;h++)for(var i=0;i<b;i++){g=new RegExp(c[h],"g");try{"".trim(),f=!0}catch(j){f=!1}a[i]=f?a[i].trim():a[i],g.test(a[i])&&(e[i]=a[i].replace(g,"-o-"+c[h]))}return e.join(", ").replace("[","").replace("]","");}())`;
+      @transitionMs: ~`(function(){var a,b,c,d,e,f,g;a="@{arguments}".split(","),c=["transform"],d=c.length,e=a,f=!1,b=a.length;for(var h=0;h<d;h++)for(var i=0;i<b;i++){g=new RegExp(c[h],"g");try{"".trim(),f=!0}catch(j){f=!1}a[i]=f?a[i].trim():a[i],g.test(a[i])&&(e[i]=a[i].replace(g,"-ms-"+c[h]))}return e.join(", ").replace("[","").replace("]","");}())`;
+      @transitionW3C: ~`(function(){var a,b,c;a="@{arguments}".split(","),c=!1,b=a.length;for(var d=0;d<b;d++){try{"".trim(),c=!0}catch(e){c=!1}a[d]=c?a[d].trim():a[d]}return a.join(", ").replace("[","").replace("]","");}())`;
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transition-property: ~`(function(){ var arg = "@{transitionWebkit}" || "0"; var decision = false; try{ var hasComma = arg.match(/([^ ,][a-z0-9-]*)/g); if (hasComma.length < 2) { decision = true; } } catch (e) {} if (decision === true) arg = hasComma.join(" ").replace(/,/g,""); return arg; }())`; }
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transition-property: ~`(function(){ var arg = "@{transitionMoz}" || "0"; var decision = false; try{ var hasComma = arg.match(/([^ ,][a-z0-9-]*)/g); if (hasComma.length < 2) { decision = true; } } catch (e) {} if (decision === true) arg = hasComma.join(" ").replace(/,/g,""); return arg; }())`; }
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transition-property: ~`(function(){ var arg = "@{transitionOpera}" || "0"; var decision = false; try{ var hasComma = arg.match(/([^ ,][a-z0-9-]*)/g); if (hasComma.length < 2) { decision = true; } } catch (e) {} if (decision === true) arg = hasComma.join(" ").replace(/,/g,""); return arg; }())`; }
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-transition-property: ~`(function(){ var arg = "@{transitionMs}" || "0"; var decision = false; try{ var hasComma = arg.match(/([^ ,][a-z0-9-]*)/g); if (hasComma.length < 2) { decision = true; } } catch (e) {} if (decision === true) arg = hasComma.join(" ").replace(/,/g,""); return arg; }())`; }
+        .inception (@signal, @arguments) when (@signal = 5) { transition-property: ~`(function(){ var arg = "@{transitionW3C}" || "0"; var decision = false; try{ var hasComma = arg.match(/([^ ,][a-z0-9-]*)/g); if (hasComma.length < 2) { decision = true; } } catch (e) {} if (decision === true) arg = hasComma.join(" ").replace(/,/g,""); return arg; }())`; }
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+  //    element{ .transition-property(width, height); }
+
+
+//  .transition-duration
+
+  .transition-duration(...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      @processing: ~`(function(){ var arg = "@{arguments}" || "0"; try{ var hasComma = arg.match(/,/g).length > 1 ? true : false; } catch (e) {} if (hasComma === true) arg = arg.replace(/,/g,""); arg = arg.replace("[","").replace("]",""); return arg; }())`;
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transition-duration: @processing; }
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transition-duration: @processing; }
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transition-duration: @processing; }
+        .inception (@signal, @arguments) when (@signal = 5) { transition-duration: @processing; }
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+   //   element{ .transition-duration(250ms); }
+
+
+//  .transition-timing-function
+
+  .transition-timing-function(...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+      @processing: ~`(function(){ var arg = "@{arguments}" || "ease"; arg = arg.replace("[","").replace("]",""); return arg; }())`;
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transition-timing-function: @processing; }
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transition-timing-function: @processing; }
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transition-timing-function: @processing; }
+        .inception (@signal, @arguments) when (@signal = 5) { transition-timing-function: @processing; }
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+   //   element{ .transition-timing-function(cubic-bezier(0,0,1,1)); }
+
+
+//  .transition-delay
+
+  .transition-delay(...){
+
+      //  Local config for disabling properties
+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @operaLocal: true; // Opera 10.5+
+      @msLocal: true;  // IE 10+
+
+       @processing: ~`(function(){ var arg = "@{arguments}" || "0"; arg = arg.replace("[","").replace("]",""); return arg; }())`;
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-transition-delay: @processing; }
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-transition-delay: @processing; }
+        .inception (@signal, @arguments) when (@signal = 3) { -o-transition-delay: @processing; }
+        .inception (@signal, @arguments) when (@signal = 5) { transition-delay: @processing; }
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @operaSignal, @opera, @operaLocal);
+      // --
+      .result(@arguments, @w3cSignal, @w3c, @w3cLocal);
+  }
+
+    //  element{ .transition-delay(2s); }
+
+
+//  .user-select
+
+  .user-select(@arguments:auto){
+
+      //  Local config for disabling properties
+
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @mozLocal: true; //  Firefox 4+
+      @msLocal: true;  // IE 10+
+
+      .result (@arguments, @signal, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) {
+        .inception (@signal, @arguments) when (@signal = 1) { -webkit-user-select: @arguments; }
+        .inception (@signal, @arguments) when (@signal = 2) { -moz-user-select: @arguments; }
+        .inception (@signal, @arguments) when (@signal = 4) { -ms-user-select: @arguments; }
+        .inception (@signal, @arguments) when (@signal > 5),(@signal < 1) { error: "Signal is out of range"; }
+        .inception(@signal, @arguments);
+      }
+      .result (@arguments, @signal, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+
+      .result(@arguments, @webkitSignal, @webkit, @webkitLocal);
+      // --  this comment must be here because of LESS bug
+      .result(@arguments, @mozSignal, @moz, @mozLocal);
+      // --
+      .result(@arguments, @msSignal, @ms, @msLocal);
+  }
+
+   //   element{ .user-select(text); }
+
+
+//  DEPRECATED mixins (must be supported because of old version of CSS Hat)
+
+  //  .gradient (renamed background-image)
+
+  .gradient(...){
+
+      //  Local config for disabling properties
+
+      @svg: true; //  SVG gradient for IE9
+      @mozLocal: true; //  Firefox 4+
+      @webkitLocal: true; // Chrome 7+, Safari 5+, iOS5, Android
+      @operaLocal: true; // Opera 10.5+
+      @w3cLocal: true; // Unprefixed W3C syntax
+      
+      @backgroundSVG: ~`(function(){function G(a){var b="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",c,d,e,f,g,h,i,j,k=0,l=0,m="",n=[];if(!a)return a;do c=a.charCodeAt(k++),d=a.charCodeAt(k++),e=a.charCodeAt(k++),j=c<<16|d<<8|e,f=j>>18&63,g=j>>12&63,h=j>>6&63,i=j&63,n[l++]=b.charAt(f)+b.charAt(g)+b.charAt(h)+b.charAt(i);while(k<a.length);m=n.join("");var o=a.length%3;return(o?m.slice(0,o-3):m)+"===".slice(o||3)}var a="@{arguments}",b=null,c=!0,d=a.split(/,(?=\s*(?:linear|radial))/g),e=d.length,f=/top/,g=/right/,h=/bottom/,i=/left/,j=/to\s*top/,k=/to\s*right/,l=/to\s*bottom/,m=/to\s*left/,n=/45deg/,o=/-45deg/,p=/\d*deg/;for(var q=0;q<e;q++){if(/linear/.test(d[q])){d[q]=d[q].replace(/linear-gradient\s*\(/,'<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">');if(f.test(d[q])&&!j.test(d[q])||l.test(d[q])||/180deg/.test(d[q])){var r=null;l.test(d[q])?r=l:/180deg/.test(d[q])?r=/180deg/:r=f,d[q]=d[q].replace(r,'<linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">')}else if(g.test(d[q])&&!k.test(d[q])||m.test(d[q])||/270deg/.test(d[q])){var r=null;m.test(d[q])?r=m:/270deg/.test(d[q])?r=/270deg/:r=g,d[q]=d[q].replace(r,'<linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="100%" y1="0%" x2="0%" y2="0%">')}else if(h.test(d[q])&&!l.test(d[q])||j.test(d[q])||/[^\d]0deg/.test(d[q])){var r=null;j.test(d[q])?r=j:/0deg/.test(d[q])?r=/0deg/:r=h,d[q]=d[q].replace(r,'<linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="100%" x2="0%" y2="0%">')}else if(i.test(d[q])&&!m.test(d[q])||k.test(d[q])||/90deg/.test(d[q])){var r=null;k.test(d[q])?r=k:/90deg/.test(d[q])?r=/90deg/:r=i,d[q]=d[q].replace(r,'<linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">')}else n.test(d[q])&&!o.test(d[q])?d[q]=d[q].replace(n,'<linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="100%" x2="100%" y2="0%">'):o.test(d[q])?d[q]=d[q].replace(o,'<linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%">'):c=!1}try{"".trim(),b=!0}catch(s){b=!1}b&&(d[q]=d[q].trim());if(/linear/.test(d[q])||/radial/.test(d[q])){d[q]=d[q].slice(0,-1),d[q]="url(data:image/svg+xml;base64--"+d[q]+'</linearGradient><rect x="0" y="0" width="1" height="1" fill="url(***)" /></svg>)';var t=d.join("@@@"),u=t.match(/rgba?\(\d+,\s*\d+,\s*\d+,\s*(?:0|1|\.\d+|0\.\d+)\)\s*\d*%*/g)||0,v=t.match(/hsla?\(\d+,\s*\d+%,\s*\d+%,\s*(?:0|1|\.\d+|0\.\d+)\)\s*\d*%*/g)||0,w=[],x=[];for(var y=0;y<u.length;y++)w[y]=u[y].replace(/,/g,"--");for(var z=0;z<v.length;z++)x[z]=v[z].replace(/,/g,"--");for(var A=0;A<u.length;A++)t=t.replace(u[A],w[A]);for(var B=0;B<v.length;B++)t=t.replace(v[B],x[B]);var C=t.split(",");for(var D=0;D<C.length;D++){C[D]=C[D].replace(/(#\w{3,6})\s*(\d*%*)/g,'<stop offset="$2" stop-color="$1" stop-opacity="1"/>').replace(/(rgba?\(\d+--\s*\d+--\s*\d+--\s*(0|1|\.\d+|0\.\d+)\))\s*(\d*%)*/g,'<stop offset="$3" stop-color="$1" stop-opacity="$2"/>').replace(/rgba/g,"rgb").replace(/(hsla?\(\d+--\s*\d+%--\s*\d+%--\s*(0|1|\.\d+|0\.\d+)\))\s*(\d*%)*/g,'<stop offset="$3" stop-color="$1" stop-opacity="$2"/>').replace(/hsla/g,"hsl").replace(/((?:aqua|black|blue|fuchsia|gray|grey|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow))\s*(\d*%)*/g,'<stop offset="$2" stop-color="$1" stop-opacity="1"/>').replace(/\*\*\*/,"#grad-ucgg-generated");try{"".trim(),b=!0}catch(s){b=!1}b&&(C[D]=C[D].trim())}C=C.toString().replace(/,/g,"").replace(/--/g,",").replace(/(rgb?\(\d+,\s*\d+,\s*\d+),\s*(?:0|1|\.\d+|0\.\d+)\)/g,"$1)").replace(/(hsl?\(\d+,\s*\d+%,\s*\d+%),\s*(?:0|1|\.\d+|0\.\d+)\)/g,"$1)")}}/radial/.test(C)&&(/((ellipse).*(center)|(circle).*(center))/g.test(C)?C=C.replace(/<\/linearGradient>/g,"</radialGradient>").replace(/radial-gradient[^<]+/g,'<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><radialGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" cx="50%" cy="50%" r="75%">').replace(/<rect x=\S+\d\S+ y=\S+\d\S+ width=\S+\d\S+ height=\S+\d\S+ fill=\S+\w\S+ \/>/g,'<rect x="-50" y="-50" width="101" height="101" fill="url(#grad-ucgg-generated)" />'):C=!1);var E=null;try{C=C.split("@@@");var F=0;for(F;F<C.length;F++)E=C[F].match(/<\?xml.*<\/svg>/),E=G(E.join("")),C[F]=C[F].replace(/(<\?xml.*<\/svg>)/,E)}catch(s){}return c?C:C=!1,C?C.toString().replace(/\[/g,"").replace(/\]/g,""):C}())`;
+      @backgroundMoz: ~`(function(){var a,b,c,d,e,f,g,h,i,j,k;a="@{arguments}",c=null,d=a.split(/,(?=\s*(?:linear|radial))/g),e=d.length,k=/to\s*top/,j=/to\s*right/,h=/to\s*bottom/,i=/to\s*left/,b=/\d*deg/,f=0;while(f<e){/linear/.test(d[f])?(d[f]=d[f].replace(/linear-gradient/,"-moz-linear-gradient"),k.test(d[f])?d[f]=d[f].replace(k,"bottom"):j.test(d[f])?d[f]=d[f].replace(j,"left"):h.test(d[f])?d[f]=d[f].replace(h,"top"):i.test(d[f])?d[f]=d[f].replace(i,"right"):b.test(d[f])&&(g=d[f].match(/\d*deg/),g=(parseInt(g)-90)*-1+"deg",d[f]=d[f].replace(b,g))):d[f]=d[f].replace(/radial-gradient/,"-moz-radial-gradient").replace(/,\s* \d*(px|%) \d*(px|%)/,", circle").replace(/\(+\s*(.*) at\s*([^,]+)/g,"($2, $1");try{"".trim(),c=!0}catch(l){c=!1}c&&(d[f]=d[f].trim()),f++}return d.toString().replace(/\[/g,"").replace(/\]/g,"");}())`;
+      @backgroundWebkit: ~`(function(){var a,b,c,d,e,f,g,h,i,j,k;a="@{arguments}",c=null,d=a.split(/,(?=\s*(?:linear|radial))/g),e=d.length,k=/to\s*top/,j=/to\s*right/,h=/to\s*bottom/,i=/to\s*left/,b=/\d*deg/,f=0;while(f<e){/linear/.test(d[f])?(d[f]=d[f].replace(/linear-gradient/,"-webkit-linear-gradient"),k.test(d[f])?d[f]=d[f].replace(k,"bottom"):j.test(d[f])?d[f]=d[f].replace(j,"left"):h.test(d[f])?d[f]=d[f].replace(h,"top"):i.test(d[f])?d[f]=d[f].replace(i,"right"):b.test(d[f])&&(g=d[f].match(/\d*deg/),g=(parseInt(g)-90)*-1+"deg",d[f]=d[f].replace(b,g))):d[f]=d[f].replace(/radial-gradient/,"-webkit-radial-gradient").replace(/\(+\s*(.*) at\s*([^,]+)/g,"($2, $1");try{"".trim(),c=!0}catch(l){c=!1}c&&(d[f]=d[f].trim()),f++}return d.toString().replace(/\[/g,"").replace(/\]/g,"");}())`;
+      @backgroundOpera: ~`(function(){var a,b,c,d,e,f,g,h,i,j,k;a="@{arguments}",c=null,d=a.split(/,(?=\s*(?:linear|radial))/g),e=d.length,k=/to\s*top/,j=/to\s*right/,h=/to\s*bottom/,i=/to\s*left/,b=/\d*deg/,f=0;while(f<e){/linear/.test(d[f])?(d[f]=d[f].replace(/linear-gradient/,"-o-linear-gradient"),k.test(d[f])?d[f]=d[f].replace(k,"bottom"):j.test(d[f])?d[f]=d[f].replace(j,"left"):h.test(d[f])?d[f]=d[f].replace(h,"top"):i.test(d[f])?d[f]=d[f].replace(i,"right"):b.test(d[f])&&(g=d[f].match(/\d*deg/),g=(parseInt(g)-90)*-1+"deg",d[f]=d[f].replace(b,g))):d[f]=d[f].replace(/radial-gradient/,"-o-radial-gradient").replace(/\(+\s*(.*) at\s*([^,]+)/g,"($2, $1");try{"".trim(),c=!0}catch(l){c=!1}c&&(d[f]=d[f].trim()),f++}return d.toString().replace(/\[/g,"").replace(/\]/g,"");})()`;
+      @backgroundW3C: ~`(function(){var a,b,c,d,e;a="@{arguments}",b=null,c=a.split(/,(?=\s*(?:linear|radial))/g),d=c.length,e=0;while(e<d){try{"".trim(),b=!0}catch(f){b=!1}b&&(c[e]=c[e].trim()),e++}return c.toString().replace(/\[/g,"").replace(/\]/g,"");}())`;
+
+      .result(@arguments, @boolean, @localBoolean) when (@boolean = true) and (@localBoolean = true) { background-image: @arguments; }
+      .result(@arguments, @boolean, @localBoolean) when not (@boolean = true), not (@localBoolean = true) { }
+      .result(@arguments, @boolean, @localBoolean, @property) when (@boolean = true) and (@localBoolean = true) and (isstring(@property)) { background-image: @arguments; }
+      .result(@arguments, @boolean, @localBoolean, @property) when not (@boolean = true), not (@localBoolean = true), not (isstring(@property)) { }
+
+      .result(@backgroundSVG, @svg, @svg, @backgroundSVG);
+      // --  this comment must be here because of LESS bug
+      .result(@backgroundMoz, @moz, @mozLocal);
+      // --
+      .result(@backgroundWebkit, @webkit, @webkitLocal);
+      // --
+      .result(@backgroundOpera, @opera, @operaLocal);
+      // --
+      .result(@backgroundW3C, @w3c, @w3cLocal);
+  }
+
+    //  element{ .gradient(~"linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%)"); }
diff --git a/app/soc/content/less/soc/main.less b/app/soc/content/less/soc/main.less
new file mode 100755
index 0000000..0673b2e
--- /dev/null
+++ b/app/soc/content/less/soc/main.less
@@ -0,0 +1,30 @@
+// Welcome to my Sass setup!
+// I like to break out my sass into individual files,
+// so this page mainly just imports those partials
+
+
+// import normalize (a version of css reset)
+@import "normalize";
+
+// import mixins and variables (special Sass stuff)
+@import "mixins";
+
+// import site partials
+@import "elements/helper";
+@import "elements/grid";
+@import "elements/link-styles";
+@import "elements/headers-styles";
+
+// partials specific to a page
+@import "elements/general";
+@import "elements/header";
+@import "elements/footer";
+@import "elements/projects";
+@import "elements/latest";
+@import "elements/social-media";
+
+
+// print stylesheet
+@media print {
+	@import "print";
+}
diff --git a/app/soc/content/less/soc/mixins.less b/app/soc/content/less/soc/mixins.less
new file mode 100755
index 0000000..4e2426d
--- /dev/null
+++ b/app/soc/content/less/soc/mixins.less
@@ -0,0 +1,55 @@
+
+
+@import "lesshat";
+
+// ==========================================================================
+// Breakpoints
+
+@small: 45em;
+@medium: 62em;
+
+@break-small: ~"only screen and (min-width: 45em)";
+@break-medium: ~"only screen and (min-width: 62em)";
+
+// ==========================================================================
+// Colors
+
+
+@alert-yellow:      #ebe16f;
+@alert-red:         #fbe3e4;
+@alert-green:       #e6efc2;
+@alert-blue:        #d5edf8;
+
+@black:             #000;
+@white:             #fff;
+@web-black:			#666666;
+
+@google-blue: 			#1F93CF;
+@google-orange: 		#F29B07;
+
+@link-color:        @google-blue;
+@link-color-hover:   @google-orange;
+
+
+// ==========================================================================
+// Typography
+
+@serif:        'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+@sans-serif:   @serif;
+
+
+// ==========================================================================
+// clearfix
+
+.clearfix {
+  zoom: 1; // For IE 6/7 (trigger hasLayout)
+
+  &:before, &:after {
+    content: "";
+    display: table;
+  }
+
+  &:after {
+    clear:both;
+  }
+}
\ No newline at end of file
diff --git a/app/soc/content/less/soc/normalize.less b/app/soc/content/less/soc/normalize.less
new file mode 100755
index 0000000..9528d00
--- /dev/null
+++ b/app/soc/content/less/soc/normalize.less
@@ -0,0 +1,536 @@
+/*! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/*
+ * Corrects `block` display not defined in IE6/7/8/9 & FF3.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/*
+ * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+}
+
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/*
+ * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
+ * Known issue: no IE6 support.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
+ *    `em` units.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-size: 100%; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+ * Addresses `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+
+html,
+button,
+input,
+select,
+textarea {
+    font-family: sans-serif;
+}
+
+/*
+ * Addresses margins handled incorrectly in IE6/7.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/*
+ * Addresses `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ * people.opera.com/patrickl/experiments/keyboard/test
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/*
+ * Addresses font sizes and margins set differently in IE6/7.
+ * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+h2 {
+    font-size: 1.5em;
+    margin: 0.83em 0;
+}
+
+h3 {
+    font-size: 1.17em;
+    margin: 1em 0;
+}
+
+h4 {
+    font-size: 1em;
+    margin: 1.33em 0;
+}
+
+h5 {
+    font-size: 0.83em;
+    margin: 1.67em 0;
+}
+
+h6 {
+    font-size: 0.75em;
+    margin: 2.33em 0;
+}
+
+/*
+ * Addresses styling not present in IE7/8/9, S5, Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to `bolder` in FF3+, S4/5, Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+blockquote {
+    margin: 1em 40px;
+}
+
+/*
+ * Addresses styling not present in S5, Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE6/7/8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/*
+ * Addresses margins set differently in IE6/7.
+ */
+
+p,
+pre {
+    margin: 1em 0;
+}
+
+/*
+ * Corrects font family set oddly in IE6, S4/5, Chrome.
+ * en.wikipedia.org/wiki/User:Davidgothberg/Test59
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    _font-family: 'courier new', monospace;
+    font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/*
+ * Addresses CSS quotes not supported in IE6/7.
+ */
+
+q {
+    quotes: none;
+}
+
+/*
+ * Addresses `quotes` property not supported in S4.
+ */
+
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+small {
+    font-size: 75%;
+}
+
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ * gist.github.com/413930
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+
+/*
+ * Addresses margins set differently in IE6/7.
+ */
+
+dl,
+menu,
+ol,
+ul {
+    margin: 1em 0;
+}
+
+dd {
+    margin: 0 0 0 40px;
+}
+
+/*
+ * Addresses paddings set differently in IE6/7.
+ */
+
+menu,
+ol,
+ul {
+    padding: 0 0 0 40px;
+}
+
+/*
+ * Corrects list images handled incorrectly in IE7.
+ */
+
+nav ul,
+nav ol {
+    list-style: none;
+    list-style-image: none;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * 1. Removes border when inside `a` element in IE6/7/8/9, FF3.
+ * 2. Improves image quality when scaled in IE7.
+ *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+ */
+
+img {
+    border: 0; /* 1 */
+    -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/*
+ * Corrects overflow displayed oddly in IE9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/*
+ * Addresses margin not present in IE6/7/8/9, S5, O11.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/*
+ * Corrects margin displayed oddly in IE6/7.
+ */
+
+form {
+    margin: 0;
+}
+
+/*
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE6/7/8/9.
+ * 2. Corrects text not wrapping in FF3.
+ * 3. Corrects alignment displayed oddly in IE6/7.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0;
+    white-space: normal; /* 2 */
+    *margin-left: -7px; /* 3 */
+}
+
+/*
+ * 1. Corrects font size not being inherited in all browsers.
+ * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
+ * 3. Improves appearance and consistency in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; /* 1 */
+    margin: 0; /* 2 */
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+}
+
+/*
+ * Addresses FF3/4 setting `line-height` on `input` using `!important` in the
+ * UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/*
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type
+ *    `input` and others.
+ * 4. Removes inner spacing in IE7 without affecting normal text inputs.
+ *    Known issue: inner spacing remains in IE6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+    *overflow: visible;  /* 4 */
+}
+
+/*
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to content-box in IE8/9.
+ * 2. Removes excess padding in IE8/9.
+ * 3. Removes excess padding in IE7.
+ *    Known issue: excess padding remains in IE6.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+    *height: 13px; /* 3 */
+    *width: 13px; /* 3 */
+}
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
+ *    to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/*
+ * Removes inner padding and search cancel button in S5, Chrome on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in FF3+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE6/7/8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/*
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+/******************************************************************
+CUSTOMIZED RESET VALUES
+I added these extra styles as a more personalized reset. Feel free
+to remove them if you like or add your own. If you want to update
+the normalize styles, make sure to edit from this point up.
+******************************************************************/
+
+// proper formatting (http://blog.fontdeck.com/post/9037028497/hyphens) 
+p {
+	-webkit-hyphens: auto;
+	-epub-hyphens:   auto;
+	-moz-hyphens:    auto;
+  hyphens:         auto;
+}
+
+b, strong, .strong { font-weight: bold; }
+
+dfn, em, .em { font-style: italic; }
+
+small, .small { font-size: 75%; }
+
+ul, ol {
+	padding: 0;
+	list-style-type: none;
+}
+
+dd {
+	margin: 0;
+}
+
+.sidebar ul,
+.sidebar ol,
+.commentlist {
+	list-style: none;
+}
diff --git a/app/soc/content/less/soc/print.less b/app/soc/content/less/soc/print.less
new file mode 100755
index 0000000..72ef681
--- /dev/null
+++ b/app/soc/content/less/soc/print.less
@@ -0,0 +1,78 @@
+//******************************************************************
+//  Print stylesheet
+//  
+//******************************************************************
+
+
+
+
+
+// some generic print styles
+
+  * {
+    background: transparent !important;
+    color: black !important;
+    text-shadow: none !important;
+    filter:none !important;
+    -ms-filter: none !important;
+  }
+
+  a, a:visited {
+    color: #444 !important;
+    text-decoration: underline;
+
+    // show links on printed pages
+    &:after {
+      content: " (" attr(href) ")";
+    }
+
+    // show title too
+    abbr[title]:after {
+      content: " (" attr(title) ")";
+    }
+  }
+
+  .ir a:after,
+  a[href^="javascript:"]:after,
+  a[href^="#"]:after {
+    content: "";
+  }
+
+  pre, blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  tr, img {
+    page-break-inside: avoid;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+    @page {
+      margin: 0.5cm;
+    }
+
+    p, h2, h3 {
+      orphans: 3;
+      widows: 3;
+    }
+
+    h2,
+    h3 {
+      page-break-after: avoid;
+    }
+
+    // hide content people who print don't need to see
+    .page-navigation,
+    .wp-prev-next,
+    .respond-form,
+    nav {
+      display: none;
+    }
diff --git a/app/soc/models/seed_db.py b/app/soc/models/seed_db.py
index c9d27c3..3cb7156 100644
--- a/app/soc/models/seed_db.py
+++ b/app/soc/models/seed_db.py
@@ -61,7 +61,7 @@
 
   site_properties = {
       'key_name': 'site',
-      'latest_gsoc': 'google/gsoc2009',
+      'latest_gsoc': 'google/gsoc2014',
       'latest_gci': 'google/gci2009',
       }
 
@@ -134,8 +134,8 @@
   after = now + datetime.timedelta(365)
 
   timeline_properties = {
-      'key_name': 'google/gsoc2009',
-      'link_id': 'gsoc2009',
+      'key_name': 'google/gsoc2014',
+      'link_id': 'gsoc2014',
       'scope': google,
       'program_start': before,
       'program_end': after,
@@ -144,28 +144,28 @@
       'student_signup_end': after,
   }
 
-  gsoc2009_timeline = GSoCTimeline(**timeline_properties)
-  gsoc2009_timeline.put()
+  gsoc2014_timeline = GSoCTimeline(**timeline_properties)
+  gsoc2014_timeline.put()
 
 
   program_properties = {
-      'key_name': 'google/gsoc2009',
-      'link_id': 'gsoc2009',
-      'program_id': 'gsoc2009',
+      'key_name': 'google/gsoc2014',
+      'link_id': 'gsoc2014',
+      'program_id': 'gsoc2014',
       'sponsor': google,
       'scope': google,
-      'name': 'Google Summer of Code 2009',
+      'name': 'Google Summer of Code 2014',
       'short_name': 'GSoC 2009',
       'group_label': 'GSOC',
-      'description': 'This is the program for GSoC 2009.',
+      'description': 'This is the program for GSoC 2014.',
       'apps_tasks_limit': 42,
       'slots': 42,
-      'timeline': gsoc2009_timeline,
+      'timeline': gsoc2014_timeline,
       'status': program_model.STATUS_VISIBLE,
       }
 
-  gsoc2009 = GSoCProgram(**program_properties)
-  gsoc2009.put()
+  gsoc2014 = GSoCProgram(**program_properties)
+  gsoc2014.put()
 
 
   timeline_properties.update({
@@ -243,17 +243,17 @@
   melange.put()
 
   group_properties.update({
-    'scope': gsoc2009,
-    'program': gsoc2009,
+    'scope': gsoc2014,
+    'program': gsoc2014,
     })
 
   role_properties = {
-      'key_name': 'google/gsoc2009/test',
+      'key_name': 'google/gsoc2014/test',
       'parent': current_user,
       'link_id': 'test',
       'public_name': 'test',
-      'scope': gsoc2009,
-      'program': gsoc2009,
+      'scope': gsoc2014,
+      'program': gsoc2014,
       'user': current_user,
       'given_name': 'Test',
       'surname': 'Example',
@@ -277,7 +277,7 @@
   orgs = []
   for i in range(15):
     group_properties.update({
-        'key_name': 'google/gsoc2009/org_%d' % i,
+        'key_name': 'google/gsoc2014/org_%d' % i,
         'link_id': 'org_%d' % i,
         'name': 'Organization %d' % i,
         'short_name': 'Org %d' % i,
@@ -347,11 +347,11 @@
 
   student_id = 'student'
   student_properties = {
-      'key_name': gsoc2009.key().name() + "/" + student_id,
+      'key_name': gsoc2014.key().name() + "/" + student_id,
       'link_id': student_id,
       'parent': student_user,
-      'scope': gsoc2009,
-      'program': gsoc2009,
+      'scope': gsoc2014,
+      'program': gsoc2014,
       'user': student_user,
       'is_student': True,
       'public_name': 'Student',
@@ -383,8 +383,8 @@
   student_info_properties = {
       'key_name': melange_student.key().name(),
       'parent': melange_student,
-      'expected_graduation': 2009,
-      'program': gsoc2009,
+      'expected_graduation': 2016,
+      'program': gsoc2014,
       'school_country': 'United States',
       'school_name': 'Test School',
       'school_home_page': 'http://www.example.com',
@@ -406,7 +406,7 @@
   student_user2.put()
   student_id = 'student2'
   student_properties.update({
-      'key_name': gsoc2009.key().name() + "/" + student_id,
+      'key_name': gsoc2014.key().name() + "/" + student_id,
       'link_id': student_id,
       'user': student_user2,
       'parent': student_user2,
@@ -424,7 +424,7 @@
       'parent': melange_student,
       'has_mentor': True,
       'org': orgs[1],
-      'program': gsoc2009,
+      'program': gsoc2014,
       }
   melange_proposal = GSoCProposal(**proposal_properties)
   melange_proposal.put()
@@ -435,7 +435,7 @@
       'status': 'accepted',
       'parent': melange_student,
       'mentors': [profile.key()],
-      'program':  gsoc2009,
+      'program':  gsoc2014,
       'org': orgs[1].key(),
        }
 
@@ -461,7 +461,7 @@
       })
 
   student_info_properties.update({
-      'key_name': gsoc2009.key().name() + "/" + student_id,
+      'key_name': gsoc2014.key().name() + "/" + student_id,
       'link_id': student_id,
       'parent': melange_student2,
   })
diff --git a/app/soc/models/site.py b/app/soc/models/site.py
index 7ecc993..0124dc6 100644
--- a/app/soc/models/site.py
+++ b/app/soc/models/site.py
@@ -166,3 +166,30 @@
       verbose_name=ugettext('Latest GCI'))
   latest_gci.help_text = ugettext(
       'The key of the latest GCI program')
+ 
+  #: Optional public mailing list.
+  mailing_list = db.StringProperty(required=False,
+      verbose_name=ugettext('Mailing List'))
+  mailing_list.help_text = ugettext(
+      'Mailing list email address, URL to sign-up page, etc.')
+
+  #: Optional public IRC channel.
+  irc_channel = db.StringProperty(required=False,
+      verbose_name=ugettext('Public IRC Channel'))
+  irc_channel.help_text = ugettext(
+     'Address of a public IRC channel.')
+
+  #: Blog page about the site.
+  blog = db.StringProperty(required=False,
+      verbose_name=ugettext('Blog'))
+  blog.help_text = ugettext('Blog page about the site.')
+
+  #: Google Plus page of the site.
+  google_plus = db.StringProperty(required=False,
+      verbose_name=ugettext('Google+ page'))
+  google_plus.help_text = ugettext('Google+ page of the site.')
+
+  #: Field storing description of the site.
+  description = db.TextProperty(verbose_name=ugettext('Description'))
+  description.help_text = ugettext(
+      'Description of the site to be placed on the site header.')
diff --git a/app/soc/modules/soc_core/callback.py b/app/soc/modules/soc_core/callback.py
index cf92431..0411114 100644
--- a/app/soc/modules/soc_core/callback.py
+++ b/app/soc/modules/soc_core/callback.py
@@ -43,6 +43,7 @@
     self.views.append(oauth.PopupOAuthVerified())
     self.views.append(site.EditSitePage())
     self.views.append(site.SiteHomepage())
+    self.views.append(site.LandingPage())
     self.views.append(user.CreateUserPage())
     self.views.append(user.EditUserPage())
     self.views.append(warmup.WarmupPage())
diff --git a/app/soc/templates/modules/gci/base.html b/app/soc/templates/modules/gci/base.html
index 0b224c0..ca7ea71 100644
--- a/app/soc/templates/modules/gci/base.html
+++ b/app/soc/templates/modules/gci/base.html
@@ -1,4 +1,4 @@
-{% extends "soc/base.html" %}
+{% extends "melange/root.html" %}
 {% comment %}
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/app/soc/templates/modules/gsoc/base.html b/app/soc/templates/modules/gsoc/base.html
index 3416ed4..424122b 100644
--- a/app/soc/templates/modules/gsoc/base.html
+++ b/app/soc/templates/modules/gsoc/base.html
@@ -1,4 +1,4 @@
-{% extends "soc/base.html" %}
+{% extends "melange/root.html" %}
 {% comment %}
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/app/soc/views/helper/context.py b/app/soc/views/helper/context.py
index c77ffe9..a226c92 100644
--- a/app/soc/views/helper/context.py
+++ b/app/soc/views/helper/context.py
@@ -61,4 +61,5 @@
       'ds_write_disabled': data.ds_write_disabled,
       'css_path': css_path,
       'gdata_is_logged_in': str(bool(gdata_is_logged_in)).lower(),
+      'site_description': data.site.description,
   }
diff --git a/app/soc/views/site.py b/app/soc/views/site.py
index 9c54519..9240fcb 100644
--- a/app/soc/views/site.py
+++ b/app/soc/views/site.py
@@ -27,15 +27,24 @@
 from melange.request import access
 from melange.request import exception
 from soc.logic import cleaning
+from soc.logic import links
 from soc.logic import site as site_logic
 from soc.models import document
 from soc.models import site
 from soc.views import base
 from soc.views import forms as views_forms
+from soc.views import template
+from soc.views.helper import request_data
+
 
 DEF_NO_DEVELOPER = ugettext(
     'This page is only accessible to developers.')
 
+CI_PROGRAM_IMAGE_PATH = '/images/gci/logo/landing-page-%s.png'
+SOC_PROGRAM_IMAGE_PATH = '/images/gsoc/logo/landing-page-%s.png'
+
+LANDING_PAGE_NAME = ugettext('Welcome to Melange')
+
 
 def getProgramMap():
   # TODO(nathaniel): Magic string? This isn't a program.
@@ -170,3 +179,130 @@
       return self.error_handler.handleUserError(user_error, data)
     except exception.ServerError as server_error:
       return self.error_handler.handleServerError(server_error, data)
+
+
+class ProgramSection(template.Template):
+  """Template that displays a program on the landing page."""
+
+  def __init__(self, data, program, image_path):
+    """Initializes new instance of this class for the specified program.
+
+    Args:
+      data: request_data.RequestData for the current request.
+      program: program entity.
+      image_path: path to the static file with a logo image to be put
+        on the landing page.
+    """
+    super(ProgramSection, self).__init__(data)
+    self._program = program
+    self._image_path = image_path
+
+  def templatePath(self):
+    """See template.Template.templatePath for specification."""
+    return 'melange/landing_page/_program_section.html'
+
+  def isActive(self):
+    """Tells whether the program in this section is currently active or not.
+
+    Returns:
+      bool indication whether the program is currently active or not.
+    """
+    return  request_data.TimelineHelper(
+        self._program.timeline, None).programActive()
+
+  def context(self):
+    """See template.Template.context for specification."""
+    homepage_url = links.LINKER.program(
+        self._program, self._program.homepage_url_name)
+
+    return {
+        'program': self._program,
+        'homepage_url': homepage_url,
+        'is_active': self.isActive(),
+        'image_path': self._image_path,
+        }
+
+
+class ContactUsSection(template.Template):
+  """Template that displays contact information on the landing page."""
+
+  def templatePath(self):
+    """See template.Template.templatePath for specification."""
+    return 'melange/landing_page/_contact_us_section.html'
+
+  def isAnyContactChannelSet(self):
+    """Tells whether there is at least one contact channel set for the site.
+
+    Returns:
+      True if at least one contact channel is defined; False otherwise.
+    """
+    return (self.data.site.blog or self.data.site.google_plus or
+        self.data.site.irc_channel or self.data.site.mailing_list)
+
+  def context(self):
+    """See template.Template.context for specification."""
+    return {
+        'blog': self.data.site.blog,
+        'google_plus': self.data.site.google_plus,
+        'irc_channel': self.data.site.irc_channel,
+        'mailing_list': self.data.site.mailing_list,
+        }
+
+
+class LandingPage(base.RequestHandler):
+  """View with the landing page that is displayed when user visits
+  the main URL for the application.
+  """
+  # TODO(daniel): it should be changed to All Allowed Checker
+  access_checker = access.DEVELOPER_ACCESS_CHECKER
+
+  def djangoURLPatterns(self):
+    """See base.RequestHandler.getDjangoURLPatterns for specification."""
+    # TODO(daniel): this should be changed to '/' when the page is public
+    return [django_url(r'^landing_page$', self, name='landing_page')]
+
+  def templatePath(self):
+    """See base.RequestHandler.templatePath for specification."""
+    return 'melange/landing_page/landing_page.html'
+
+  def context(self, data, check, mutator):
+    """See base.RequestHandler.context for specification."""
+    # TODO(daniel): these models should not be imported directly here
+    from soc.modules.gsoc.models import program as soc_program_model
+    from soc.modules.gci.models import program as ci_program_model
+
+    program_sections = []
+
+    if data.site.latest_gsoc:
+      latest_soc = soc_program_model.GSoCProgram.get_by_key_name(
+          data.site.latest_gsoc)
+      if latest_soc:
+        program_sections.append(
+            ProgramSection(data, latest_soc,
+                SOC_PROGRAM_IMAGE_PATH % latest_soc.program_id))
+
+    if data.site.latest_gci:
+      latest_ci = ci_program_model.GCIProgram.get_by_key_name(
+          data.site.latest_gci)
+      if latest_ci:
+        program_sections.append(
+            ProgramSection(
+                data, latest_ci, CI_PROGRAM_IMAGE_PATH % latest_ci.program_id))
+
+    if len(program_sections) == 1:
+      # do not bother to show landing page if there is only one active program
+      # just redirect to the corresponding home page instead
+      raise exception.Redirect(program_sections[0].context()['homepage_url'])
+    else:
+      active_programs_counter = len([
+          program_section for program_section in program_sections
+              if program_section.isActive()])
+
+      contact_us_section = ContactUsSection(data)
+
+      return {
+          'active_programs_counter': active_programs_counter,
+          'contact_us_section': contact_us_section,
+          'program_sections': program_sections,
+          'page_name': LANDING_PAGE_NAME,
+          }
diff --git a/tests/app/soc/views/test_site.py b/tests/app/soc/views/test_site.py
new file mode 100644
index 0000000..67cc4ba
--- /dev/null
+++ b/tests/app/soc/views/test_site.py
@@ -0,0 +1,82 @@
+# Copyright 2013 the Melange authors.
+#
+# Licensed 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.
+
+"""Tests for site related views."""
+
+from soc.models import site as site_model
+from soc.modules.gci.models import program as gci_program_model
+from soc.modules.gsoc.models import program as gsoc_program_model
+from soc.modules.seeder.logic.seeder import logic as seeder_logic
+
+from tests import profile_utils
+from tests import test_utils
+
+
+class LandingPageTest(test_utils.DjangoTestCase):
+  """Unit tests for LandingPage class."""
+
+  def setUp(self):
+    """See unittest.TestCase.setUp for specification."""
+    # TODO(daniel): eliminate it when page is publicly accessible
+    user = profile_utils.seedUser(is_developer=True)
+    profile_utils.login(user)
+
+    site_properties = {'key_name': 'site'}
+    self.site = seeder_logic.seed(site_model.Site, properties=site_properties)
+
+    self.gsoc_program = seeder_logic.seed(gsoc_program_model.GSoCProgram)
+    self.gci_program = seeder_logic.seed(gci_program_model.GCIProgram)
+
+  def _assertPageTemplatesUsed(self, response):
+    """Asserts that all templates for the tested page are used."""
+    self.assertTemplateUsed(
+        response, 'melange/landing_page/_program_section.html')
+    self.assertTemplateUsed(
+        response, 'melange/landing_page/_contact_us_section.html')
+
+  def testPageLoads(self):
+    """Tests that page loads correctly."""
+    self.site.latest_gsoc = self.gsoc_program.key().name()
+    self.site.latest_gci = self.gci_program.key().name()
+    self.site.mailing_list = 'dev@test.com'
+    self.site.put()
+
+    response = self.get('/landing_page')
+    self.assertResponseOK(response)    
+    self._assertPageTemplatesUsed(response)
+
+  def testOneLatestProgram(self):
+    """Tests that redirect response is returned for one defined program."""
+    self.site.latest_gsoc = self.gsoc_program.key().name()
+    self.site.latest_gci = None
+    self.site.put()
+
+    response = self.get('/landing_page')
+    self.assertResponseRedirect(response)
+
+    self.site.latest_gsoc = None
+    self.site.latest_gci = self.gci_program.key().name()
+    self.site.put()
+
+    response = self.get('/landing_page')
+    self.assertResponseRedirect(response)
+
+  def testTwoLatestPrograms(self):
+    """Tests that redirect response is returned for one defined program."""
+    self.site.latest_gsoc = self.gsoc_program.key().name()
+    self.site.latest_gci = self.gci_program.key().name()
+    self.site.put()
+
+    response = self.get('/landing_page')
+    self.assertResponseOK(response)