Start of Repo

.gitignore

@@ -0,0 +1,4 @@
+# Include your project-specific ignores in this file
+# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
+uploads/
+tools/

css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, main {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

css/style.css

@@ -0,0 +1,314 @@
+/* -------------------------------- 
+
+Primary style
+
+-------------------------------- */
+*, *::after, *::before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+*::after, *::before {
+  content: '';
+}
+
+body {
+  font-size: 100%;
+  font-family: "PT Sans", sans-serif;
+  color: #f8f7ee;
+  background-color: #29324e;
+}
+
+a {
+  color: #f05451;
+  text-decoration: none;
+}
+
+/* -------------------------------- 
+
+Main components 
+
+-------------------------------- */
+header {
+  position: relative;
+  height: 160px;
+  line-height: 180px;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+header h1 {
+  font-size: 20px;
+  font-size: 1.25rem;
+}
+@media only screen and (min-width: 768px) {
+  header {
+    height: 200px;
+    line-height: 225px;
+  }
+  header h1 {
+    font-size: 26px;
+    font-size: 1.625rem;
+  }
+}
+
+.cd-tabs {
+  position: relative;
+  width: 90%;
+  max-width: 960px;
+  margin: 2em auto;
+}
+.cd-tabs:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.cd-tabs::after {
+  /* subtle gradient layer on top right - to indicate it's possible to scroll */
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 60px;
+  width: 50px;
+  z-index: 1;
+  pointer-events: none;
+  background: -webkit-linear-gradient( right , #f8f7ee, rgba(248, 247, 238, 0));
+  background: linear-gradient(to left, #f8f7ee, rgba(248, 247, 238, 0));
+  visibility: visible;
+  opacity: 1;
+  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
+  -moz-transition: opacity .3s 0s, visibility 0s 0s;
+  transition: opacity .3s 0s, visibility 0s 0s;
+}
+.no-cssgradients .cd-tabs::after {
+  display: none;
+}
+.cd-tabs.is-ended::after {
+  /* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
+  -moz-transition: opacity .3s 0s, visibility 0s .3s;
+  transition: opacity .3s 0s, visibility 0s .3s;
+}
+.cd-tabs nav {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  background: #f8f7ee;
+  box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
+}
+@media only screen and (min-width: 768px) {
+  .cd-tabs::after {
+    display: none;
+  }
+  .cd-tabs nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    box-shadow: inset -2px 0 3px rgba(203, 196, 130, 0.06);
+    z-index: 1;
+  }
+}
+@media only screen and (min-width: 960px) {
+  .cd-tabs nav {
+    position: relative;
+    float: none;
+    background: transparent;
+    box-shadow: none;
+  }
+}
+
+.cd-tabs-navigation {
+  width: 360px;
+}
+.cd-tabs-navigation:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.cd-tabs-navigation li {
+  float: left;
+}
+.cd-tabs-navigation a {
+  position: relative;
+  display: block;
+  height: 60px;
+  width: 60px;
+  text-align: center;
+  font-size: 12px;
+  font-size: 0.75rem;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 700;
+  color: #c3c2b9;
+  padding-top: 34px;
+}
+.no-touch .cd-tabs-navigation a:hover {
+  color: #29324e;
+  background-color: rgba(233, 230, 202, 0.3);
+}
+.cd-tabs-navigation a.selected {
+  background-color: #ffffff !important;
+  box-shadow: inset 0 2px 0 #f05451;
+  color: #29324e;
+}
+.cd-tabs-navigation a::before {
+  /* icons */
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  margin-left: -10px;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  background-image: url("../img/vicons.svg");
+  background-repeat: no-repeat;
+}
+.cd-tabs-navigation a[data-content='inbox']::before {
+  background-position: 0 0;
+}
+.cd-tabs-navigation a[data-content='new']::before {
+  background-position: -20px 0;
+}
+.cd-tabs-navigation a[data-content='gallery']::before {
+  background-position: -40px 0;
+}
+.cd-tabs-navigation a[data-content='store']::before {
+  background-position: -60px 0;
+}
+.cd-tabs-navigation a[data-content='settings']::before {
+  background-position: -80px 0;
+}
+.cd-tabs-navigation a[data-content='trash']::before {
+  background-position: -100px 0;
+}
+.cd-tabs-navigation a[data-content='inbox'].selected::before {
+  background-position: 0 -20px;
+}
+.cd-tabs-navigation a[data-content='new'].selected::before {
+  background-position: -20px -20px;
+}
+.cd-tabs-navigation a[data-content='gallery'].selected::before {
+  background-position: -40px -20px;
+}
+.cd-tabs-navigation a[data-content='store'].selected::before {
+  background-position: -60px -20px;
+}
+.cd-tabs-navigation a[data-content='settings'].selected::before {
+  background-position: -80px -20px;
+}
+.cd-tabs-navigation a[data-content='trash'].selected::before {
+  background-position: -100px -20px;
+}
+@media only screen and (min-width: 768px) {
+  .cd-tabs-navigation {
+    /* move the nav to the left on medium sized devices */
+    width: 80px;
+    float: left;
+  }
+  .cd-tabs-navigation a {
+    height: 80px;
+    width: 80px;
+    padding-top: 46px;
+  }
+  .cd-tabs-navigation a.selected {
+    box-shadow: inset 2px 0 0 #f05451;
+  }
+  .cd-tabs-navigation a::before {
+    top: 22px;
+  }
+}
+@media only screen and (min-width: 960px) {
+  .cd-tabs-navigation {
+    /* tabbed on top on big devices */
+    width: auto;
+    background-color: #f8f7ee;
+    box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
+  }
+  .cd-tabs-navigation a {
+    height: 60px;
+    line-height: 60px;
+    width: auto;
+    text-align: left;
+    font-size: 14px;
+    font-size: 0.875rem;
+    padding: 0 2.8em 0 4.6em;
+  }
+  .cd-tabs-navigation a.selected {
+    box-shadow: inset 0 2px 0 #f05451;
+  }
+  .cd-tabs-navigation a::before {
+    top: 50%;
+    margin-top: -10px;
+    margin-left: 0;
+    left: 38px;
+  }
+}
+
+.cd-tabs-content {
+  background: #ffffff;
+}
+.cd-tabs-content li {
+  display: none;
+  padding: 1.4em;
+}
+.cd-tabs-content li.selected {
+  display: block;
+  -webkit-animation: cd-fade-in 0.5s;
+  -moz-animation: cd-fade-in 0.5s;
+  animation: cd-fade-in 0.5s;
+}
+.cd-tabs-content li p {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: #8493bf;
+  margin-bottom: 2em;
+}
+@media only screen and (min-width: 768px) {
+  .cd-tabs-content {
+    min-height: 480px;
+  }
+  .cd-tabs-content li {
+    padding: 2em 2em 2em 7em;
+  }
+}
+@media only screen and (min-width: 960px) {
+  .cd-tabs-content {
+    min-height: 0;
+  }
+  .cd-tabs-content li {
+    padding: 3em;
+  }
+  .cd-tabs-content li p {
+    font-size: 16px;
+    font-size: 1rem;
+  }
+}
+
+@-webkit-keyframes cd-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-moz-keyframes cd-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes cd-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

img/vicons.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.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="120px" height="40px" viewBox="0 0 120 40" enable-background="new 0 0 120 40" xml:space="preserve">
+<path fill="#C3C2B9" d="M15,3c-0.3-0.6-0.7-1-1.3-1H6.2C5.6,2,5.3,2.4,5,3l-4,7v7c0,0.6,0.4,1,1,1h16c0.6,0,1-0.4,1-1v-7L15,3z
+	 M6.7,4h6.5l2.9,5h-3.6C12.2,9,12,9.2,12,9.5v0.4c0,1-0.8,2-1.8,2.1C9,12.1,8,11.2,8,10V9.5C8,9.2,7.8,9,7.5,9H3.9L6.7,4z M16.5,16
+	h-13C3.2,16,3,15.8,3,15.5V11h3.1c0.4,1.7,2,3,3.9,3s3.4-1.3,3.9-3H17v4.5C17,15.8,16.8,16,16.5,16z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#C3C2B9" d="M37.7,6.5L30.5,14v0H26V9.5l7.5-7.2C33.7,2.1,33.9,2,34.2,2
+	c0.3,0,0.5,0.1,0.7,0.3l2.8,2.8C38.1,5.5,38.1,6.1,37.7,6.5z M34.2,4.4L28,10.3V12h1.7l5.9-6.2L34.2,4.4z M27,4h-2.5
+	C24.2,4,24,4.2,24,4.5v11c0,0.3,0.2,0.5,0.5,0.5h11c0.3,0,0.5-0.2,0.5-0.5V13c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1H23
+	c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1S27.6,4,27,4z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#C3C2B9" d="M58,17h-1.5H56h0l0,0c-0.5,0-1-0.5-1-1c0-0.6,0.4-1,1-1h0.5
+	c0.3,0,0.5-0.2,0.5-0.5v-7C57,7.2,56.8,7,56.5,7H54h-0.8l-0.6-0.6L51.2,5h-2.3l-1.4,1.4L46.8,7H46h-2.5C43.2,7,43,7.2,43,7.5v7
+	c0,0.3,0.2,0.5,0.5,0.5H44c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1h-0.5H42c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h4l1.7-1.7
+	C47.9,3.1,48.1,3,48.4,3h3.2c0.3,0,0.5,0.1,0.7,0.3L54,5h4c0.6,0,1,0.4,1,1v10C59,16.6,58.6,17,58,17z M50,8c2.2,0,4,1.8,4,4
+	s-1.8,4-4,4s-4-1.8-4-4S47.8,8,50,8z M50,14c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S48.9,14,50,14z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#C3C2B9" d="M77.1,9L77.1,9c-0.7,0.7-1.5,1-2.3,1c-0.8,0-1.6-0.3-2.3-0.9
+	l-0.2-0.2C71.8,9.6,71,10,70,10H70c-0.9,0-1.8-0.4-2.3-1.1l-0.2,0.2c-0.6,0.6-1.4,0.9-2.3,0.9c-0.8,0-1.6-0.3-2.3-0.9l0,0
+	c-1.2-1.2-1.2-3.3,0-4.5l1.6-1.6C65.1,2.3,65.9,2,66.8,2c0.1,0,0.2,0,0.2,0v0h3H70h3v0c0.1,0,0.2,0,0.2,0c0.8,0,1.6,0.3,2.2,0.9
+	l1.6,1.6C78.3,5.7,78.3,7.8,77.1,9z M75.6,5.9l-1.6-1.6C73.8,4.1,73.4,4,73.2,4c0,0-0.2,0-0.2,0h-2h-1H70h-1h-2c0,0-0.2,0-0.2,0
+	c-0.2,0-0.5,0-0.8,0.3l-1.6,1.6c-0.5,0.5-0.5,1.2,0,1.7l0,0C64.6,7.9,64.9,8,65.2,8c0.3,0,0.6-0.1,0.8-0.3l0.2-0.2l1.4-1.4
+	C67.7,6,67.9,6,68,6.1l1.2,1.5C69.4,7.9,69.7,8,70,8H70c0.3,0,0.6-0.1,0.8-0.4L72,6.1c0.1-0.1,0.2-0.1,0.3,0l1.4,1.4l0.2,0.2
+	C74.1,7.9,74.4,8,74.8,8c0.3,0,0.6-0.1,0.8-0.3l0,0C76.1,7.1,76.1,6.4,75.6,5.9z M65,12L65,12c0.6,0,1,0.4,1,1v2.5
+	c0,0.3,0.2,0.5,0.5,0.5h7c0.3,0,0.5-0.2,0.5-0.5V13c0-0.5,0.4-1,1-1h0c0.5,0,1,0.4,1,1v4c0,0.5-0.4,1-1,1h-1h-8h-1c-0.5,0-1-0.4-1-1
+	v-4C64,12.4,64.4,12,65,12z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#C3C2B9" d="M93,17h-6c-3.9,0-7-3.1-7-7s3.1-7,7-7h6c3.9,0,7,3.1,7,7
+	S96.9,17,93,17z M93,5h-6c-2.8,0-5,2.2-5,5s2.2,5,5,5h6c2.8,0,5-2.2,5-5S95.8,5,93,5z M87,13c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3
+	S88.7,13,87,13z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#C3C2B9" d="M117,8v9c0,0.6-0.4,1-1,1h-12c-0.6,0-1-0.4-1-1V8h-2V7
+	c0-0.6,0.4-1,1-1h2h2V3c0-0.6,0.4-1,1-1h6c0.6,0,1,0.4,1,1v3h2h2c0.6,0,1,0.4,1,1v1H117z M112,4h-4v2h4V4z M115,8h-1h-8h-1v8h10V8z
+	 M107.5,10h1c0.3,0,0.5,0.2,0.5,0.5v3c0,0.3-0.2,0.5-0.5,0.5h-1c-0.3,0-0.5-0.2-0.5-0.5v-3C107,10.2,107.2,10,107.5,10z M111.5,10h1
+	c0.3,0,0.5,0.2,0.5,0.5v3c0,0.3-0.2,0.5-0.5,0.5h-1c-0.3,0-0.5-0.2-0.5-0.5v-3C111,10.2,111.2,10,111.5,10z"/>
+<path fill="#F05451" d="M15,23c-0.3-0.6-0.7-1-1.3-1H6.2c-0.6,0-0.9,0.4-1.2,1l-4,7v7c0,0.6,0.4,1,1,1h16c0.6,0,1-0.4,1-1v-7L15,23z
+	 M6.7,24h6.5l2.9,5h-3.6c-0.3,0-0.5,0.2-0.5,0.5v0.4c0,1-0.8,2-1.8,2.1C9,32.1,8,31.2,8,30v-0.5C8,29.2,7.8,29,7.5,29H3.9L6.7,24z
+	 M16.5,36h-13C3.2,36,3,35.8,3,35.5V31h3.1c0.4,1.7,2,3,3.9,3s3.4-1.3,3.9-3H17v4.5C17,35.8,16.8,36,16.5,36z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#F05451" d="M37.7,26.5L30.5,34v0H26v-4.5l7.5-7.2c0.2-0.2,0.5-0.3,0.7-0.3
+	c0.3,0,0.5,0.1,0.7,0.3l2.8,2.8C38.1,25.5,38.1,26.1,37.7,26.5z M34.2,24.4L28,30.3V32h1.7l5.9-6.2L34.2,24.4z M27,24h-2.5
+	c-0.3,0-0.5,0.2-0.5,0.5v11c0,0.3,0.2,0.5,0.5,0.5h11c0.3,0,0.5-0.2,0.5-0.5V33c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1
+	H23c-0.6,0-1-0.4-1-1V23c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1S27.6,24,27,24z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#F05451" d="M58,37h-1.5H56h0l0,0c-0.5,0-1-0.5-1-1c0-0.6,0.4-1,1-1h0.5
+	c0.3,0,0.5-0.2,0.5-0.5v-7c0-0.3-0.2-0.5-0.5-0.5H54h-0.8l-0.6-0.6L51.2,25h-2.3l-1.4,1.4L46.8,27H46h-2.5c-0.3,0-0.5,0.2-0.5,0.5v7
+	c0,0.3,0.2,0.5,0.5,0.5H44c0.6,0,1,0.4,1,1s-0.4,1-1,1h-0.5H42c-0.6,0-1-0.4-1-1V26c0-0.6,0.4-1,1-1h4l1.7-1.7
+	c0.2-0.2,0.4-0.3,0.7-0.3h3.2c0.3,0,0.5,0.1,0.7,0.3L54,25h4c0.6,0,1,0.4,1,1v10C59,36.6,58.6,37,58,37z M50,28c2.2,0,4,1.8,4,4
+	s-1.8,4-4,4s-4-1.8-4-4S47.8,28,50,28z M50,34c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C48,33.1,48.9,34,50,34z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#F05451" d="M77.1,29L77.1,29c-0.7,0.7-1.5,1-2.3,1c-0.8,0-1.6-0.3-2.3-0.9
+	l-0.2-0.2C71.8,29.6,71,30,70,30H70c-0.9,0-1.8-0.4-2.3-1.1l-0.2,0.2c-0.6,0.6-1.4,0.9-2.3,0.9c-0.8,0-1.6-0.3-2.3-0.9l0,0
+	c-1.2-1.2-1.2-3.3,0-4.5l1.6-1.6c0.6-0.6,1.4-0.9,2.2-0.9c0.1,0,0.2,0,0.2,0v0h3H70h3v0c0.1,0,0.2,0,0.2,0c0.8,0,1.6,0.3,2.2,0.9
+	l1.6,1.6C78.3,25.7,78.3,27.8,77.1,29z M75.6,25.9l-1.6-1.6c-0.3-0.3-0.7-0.3-0.8-0.3c0,0-0.2,0-0.2,0h-2h-1H70h-1h-2
+	c0,0-0.2,0-0.2,0c-0.2,0-0.5,0-0.8,0.3l-1.6,1.6c-0.5,0.5-0.5,1.2,0,1.7l0,0c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.8-0.3l0.2-0.2
+	l1.4-1.4c0.1-0.1,0.3-0.1,0.3,0l1.2,1.5c0.2,0.2,0.5,0.4,0.8,0.4H70c0.3,0,0.6-0.1,0.8-0.4l1.3-1.6c0.1-0.1,0.2-0.1,0.3,0l1.4,1.4
+	l0.2,0.2c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.8-0.3l0,0C76.1,27.1,76.1,26.4,75.6,25.9z M65,32L65,32c0.6,0,1,0.4,1,1v2.5
+	c0,0.3,0.2,0.5,0.5,0.5h7c0.3,0,0.5-0.2,0.5-0.5V33c0-0.5,0.4-1,1-1h0c0.5,0,1,0.4,1,1v4c0,0.5-0.4,1-1,1h-1h-8h-1c-0.5,0-1-0.4-1-1
+	v-4C64,32.4,64.4,32,65,32z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#F05451" d="M93,37h-6c-3.9,0-7-3.1-7-7s3.1-7,7-7h6c3.9,0,7,3.1,7,7
+	S96.9,37,93,37z M93,25h-6c-2.8,0-5,2.2-5,5s2.2,5,5,5h6c2.8,0,5-2.2,5-5S95.8,25,93,25z M87,33c-1.7,0-3-1.3-3-3c0-1.7,1.3-3,3-3
+	s3,1.3,3,3C90,31.7,88.7,33,87,33z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#F05451" d="M117,28v9c0,0.6-0.4,1-1,1h-12c-0.6,0-1-0.4-1-1v-9h-2v-1
+	c0-0.6,0.4-1,1-1h2h2v-3c0-0.6,0.4-1,1-1h6c0.6,0,1,0.4,1,1v3h2h2c0.6,0,1,0.4,1,1v1H117z M112,24h-4v2h4V24z M115,28h-1h-8h-1v8h10
+	V28z M107.5,30h1c0.3,0,0.5,0.2,0.5,0.5v3c0,0.3-0.2,0.5-0.5,0.5h-1c-0.3,0-0.5-0.2-0.5-0.5v-3C107,30.2,107.2,30,107.5,30z
+	 M111.5,30h1c0.3,0,0.5,0.2,0.5,0.5v3c0,0.3-0.2,0.5-0.5,0.5h-1c-0.3,0-0.5-0.2-0.5-0.5v-3C111,30.2,111.2,30,111.5,30z"/>
+</svg>

js/main.js

@@ -0,0 +1,52 @@
+jQuery(document).ready(function($){
+	var tabs = $('.cd-tabs');
+	
+	tabs.each(function(){
+		var tab = $(this),
+			tabItems = tab.find('ul.cd-tabs-navigation'),
+			tabContentWrapper = tab.children('ul.cd-tabs-content'),
+			tabNavigation = tab.find('nav');
+
+		tabItems.on('click', 'a', function(event){
+			event.preventDefault();
+			var selectedItem = $(this);
+			if( !selectedItem.hasClass('selected') ) {
+				var selectedTab = selectedItem.data('content'),
+					selectedContent = tabContentWrapper.find('li[data-content="'+selectedTab+'"]'),
+					slectedContentHeight = selectedContent.innerHeight();
+				
+				tabItems.find('a.selected').removeClass('selected');
+				selectedItem.addClass('selected');
+				selectedContent.addClass('selected').siblings('li').removeClass('selected');
+				//animate tabContentWrapper height when content changes 
+				tabContentWrapper.animate({
+					'height': slectedContentHeight
+				}, 200);
+			}
+		});
+
+		//hide the .cd-tabs::after element when tabbed navigation has scrolled to the end (mobile version)
+		checkScrolling(tabNavigation);
+		tabNavigation.on('scroll', function(){ 
+			checkScrolling($(this));
+		});
+	});
+	
+	$(window).on('resize', function(){
+		tabs.each(function(){
+			var tab = $(this);
+			checkScrolling(tab.find('nav'));
+			tab.find('.cd-tabs-content').css('height', 'auto');
+		});
+	});
+
+	function checkScrolling(tabs){
+		var totalTabWidth = parseInt(tabs.children('.cd-tabs-navigation').width()),
+		 	tabsViewport = parseInt(tabs.width());
+		if( tabs.scrollLeft() >= totalTabWidth - tabsViewport) {
+			tabs.parent('.cd-tabs').addClass('is-ended');
+		} else {
+			tabs.parent('.cd-tabs').removeClass('is-ended');
+		}
+	}
+});

lele/responsive-tabbed-navigation/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, main {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

lele/responsive-tabbed-navigation/css/style.css

@@ -0,0 +1,314 @@
+/* -------------------------------- 
+
+Primary style
+
+-------------------------------- */
+*, *::after, *::before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+*::after, *::before {
+  content: '';
+}
+
+body {
+  font-size: 100%;
+  font-family: "PT Sans", sans-serif;
+  color: #f8f7ee;
+  background-color: #29324e;
+}
+
+a {
+  color: #f05451;
+  text-decoration: none;
+}
+
+/* -------------------------------- 
+
+Main components 
+
+-------------------------------- */
+header {
+  position: relative;
+  height: 160px;
+  line-height: 180px;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+header h1 {
+  font-size: 20px;
+  font-size: 1.25rem;
+}
+@media only screen and (min-width: 768px) {
+  header {
+    height: 200px;
+    line-height: 225px;
+  }
+  header h1 {
+    font-size: 26px;
+    font-size: 1.625rem;
+  }
+}
+
+.cd-tabs {
+  position: relative;
+  width: 90%;
+  max-width: 960px;
+  margin: 2em auto;
+}
+.cd-tabs:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.cd-tabs::after {
+  /* subtle gradient layer on top right - to indicate it's possible to scroll */
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 60px;
+  width: 50px;
+  z-index: 1;
+  pointer-events: none;
+  background: -webkit-linear-gradient( right , #f8f7ee, rgba(248, 247, 238, 0));
+  background: linear-gradient(to left, #f8f7ee, rgba(248, 247, 238, 0));
+  visibility: visible;
+  opacity: 1;
+  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
+  -moz-transition: opacity .3s 0s, visibility 0s 0s;
+  transition: opacity .3s 0s, visibility 0s 0s;
+}
+.no-cssgradients .cd-tabs::after {
+  display: none;
+}
+.cd-tabs.is-ended::after {
+  /* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
+  -moz-transition: opacity .3s 0s, visibility 0s .3s;
+  transition: opacity .3s 0s, visibility 0s .3s;
+}
+.cd-tabs nav {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  background: #f8f7ee;
+  box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
+}
+@media only screen and (min-width: 768px) {
+  .cd-tabs::after {
+    display: none;
+  }
+  .cd-tabs nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    box-shadow: inset -2px 0 3px rgba(203, 196, 130, 0.06);
+    z-index: 1;
+  }
+}
+@media only screen and (min-width: 960px) {
+  .cd-tabs nav {
+    position: relative;
+    float: none;
+    background: transparent;
+    box-shadow: none;
+  }
+}
+
+.cd-tabs-navigation {
+  width: 360px;
+}
+.cd-tabs-navigation:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.cd-tabs-navigation li {
+  float: left;
+}
+.cd-tabs-navigation a {
+  position: relative;
+  display: block;
+  height: 60px;
+  width: 60px;
+  text-align: center;
+  font-size: 12px;
+  font-size: 0.75rem;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 700;
+  color: #c3c2b9;
+  padding-top: 34px;
+}
+.no-touch .cd-tabs-navigation a:hover {
+  color: #29324e;
+  background-color: rgba(233, 230, 202, 0.3);
+}
+.cd-tabs-navigation a.selected {
+  background-color: #ffffff !important;
+  box-shadow: inset 0 2px 0 #f05451;
+  color: #29324e;
+}
+.cd-tabs-navigation a::before {
+  /* icons */
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  margin-left: -10px;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  background-image: url("../img/vicons.svg");
+  background-repeat: no-repeat;
+}
+.cd-tabs-navigation a[data-content='inbox']::before {
+  background-position: 0 0;
+}
+.cd-tabs-navigation a[data-content='new']::before {
+  background-position: -20px 0;
+}
+.cd-tabs-navigation a[data-content='gallery']::before {
+  background-position: -40px 0;
+}
+.cd-tabs-navigation a[data-content='store']::before {
+  background-position: -60px 0;
+}
+.cd-tabs-navigation a[data-content='settings']::before {
+  background-position: -80px 0;
+}
+.cd-tabs-navigation a[data-content='trash']::before {
+  background-position: -100px 0;
+}
+.cd-tabs-navigation a[data-content='inbox'].selected::before {
+  background-position: 0 -20px;
+}
+.cd-tabs-navigation a[data-content='new'].selected::before {
+  background-position: -20px -20px;
+}
+.cd-tabs-navigation a[data-content='gallery'].selected::before {
+  background-position: -40px -20px;
+}
+.cd-tabs-navigation a[data-content='store'].selected::before {
+  background-position: -60px -20px;
+}
+.cd-tabs-navigation a[data-content='settings'].selected::before {
+  background-position: -80px -20px;
+}
+.cd-tabs-navigation a[data-content='trash'].selected::before {
+  background-position: -100px -20px;
+}
+@media only screen and (min-width: 768px) {
+  .cd-tabs-navigation {
+    /* move the nav to the left on medium sized devices */
+    width: 80px;
+    float: left;
+  }
+  .cd-tabs-navigation a {
+    height: 80px;
+    width: 80px;
+    padding-top: 46px;
+  }
+  .cd-tabs-navigation a.selected {
+    box-shadow: inset 2px 0 0 #f05451;
+  }
+  .cd-tabs-navigation a::before {
+    top: 22px;
+  }
+}
+@media only screen and (min-width: 960px) {
+  .cd-tabs-navigation {
+    /* tabbed on top on big devices */
+    width: auto;
+    background-color: #f8f7ee;
+    box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
+  }
+  .cd-tabs-navigation a {
+    height: 60px;
+    line-height: 60px;
+    width: auto;
+    text-align: left;
+    font-size: 14px;
+    font-size: 0.875rem;
+    padding: 0 2.8em 0 4.6em;
+  }
+  .cd-tabs-navigation a.selected {
+    box-shadow: inset 0 2px 0 #f05451;
+  }
+  .cd-tabs-navigation a::before {
+    top: 50%;
+    margin-top: -10px;
+    margin-left: 0;
+    left: 38px;
+  }
+}
+
+.cd-tabs-content {
+  background: #ffffff;
+}
+.cd-tabs-content li {
+  display: none;
+  padding: 1.4em;
+}
+.cd-tabs-content li.selected {
+  display: block;
+  -webkit-animation: cd-fade-in 0.5s;
+  -moz-animation: cd-fade-in 0.5s;
+  animation: cd-fade-in 0.5s;
+}
+.cd-tabs-content li p {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: #8493bf;
+  margin-bottom: 2em;
+}
+@media only screen and (min-width: 768px) {
+  .cd-tabs-content {
+    min-height: 480px;
+  }
+  .cd-tabs-content li {
+    padding: 2em 2em 2em 7em;
+  }
+}
+@media only screen and (min-width: 960px) {
+  .cd-tabs-content {
+    min-height: 0;
+  }
+  .cd-tabs-content li {
+    padding: 3em;
+  }
+  .cd-tabs-content li p {
+    font-size: 16px;
+    font-size: 1rem;
+  }
+}
+
+@-webkit-keyframes cd-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-moz-keyframes cd-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes cd-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

lele/responsive-tabbed-navigation/img/vicons.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.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="120px" height="40px" viewBox="0 0 120 40" enable-background="new 0 0 120 40" xml:space="preserve">
+<path fill="#C3C2B9" d="M15,3c-0.3-0.6-0.7-1-1.3-1H6.2C5.6,2,5.3,2.4,5,3l-4,7v7c0,0.6,0.4,1,1,1h16c0.6,0,1-0.4,1-1v-7L15,3z
+	 M6.7,4h6.5l2.9,5h-3.6C12.2,9,12,9.2,12,9.5v0.4c0,1-0.8,2-1.8,2.1C9,12.1,8,11.2,8,10V9.5C8,9.2,7.8,9,7.5,9H3.9L6.7,4z M16.5,16
+	h-13C3.2,16,3,15.8,3,15.5V11h3.1c0.4,1.7,2,3,3.9,3s3.4-1.3,3.9-3H17v4.5C17,15.8,16.8,16,16.5,16z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#C3C2B9" d="M37.7,6.5L30.5,14v0H26V9.5l7.5-7.2C33.7,2.1,33.9,2,34.2,2
+	c0.3,0,0.5,0.1,0.7,0.3l2.8,2.8C38.1,5.5,38.1,6.1,37.7,6.5z M34.2,4.4L28,10.3V12h1.7l5.9-6.2L34.2,4.4z M27,4h-2.5
+	C24.2,4,24,4.2,24,4.5v11c0,0.3,0.2,0.5,0.5,0.5h11c0.3,0,0.5-0.2,0.5-0.5V13c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1H23
+	c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1S27.6,4,27,4z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#C3C2B9" d="M58,17h-1.5H56h0l0,0c-0.5,0-1-0.5-1-1c0-0.6,0.4-1,1-1h0.5
+	c0.3,0,0.5-0.2,0.5-0.5v-7C57,7.2,56.8,7,56.5,7H54h-0.8l-0.6-0.6L51.2,5h-2.3l-1.4,1.4L46.8,7H46h-2.5C43.2,7,43,7.2,43,7.5v7
+	c0,0.3,0.2,0.5,0.5,0.5H44c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1h-0.5H42c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h4l1.7-1.7
+	C47.9,3.1,48.1,3,48.4,3h3.2c0.3,0,0.5,0.1,0.7,0.3L54,5h4c0.6,0,1,0.4,1,1v10C59,16.6,58.6,17,58,17z M50,8c2.2,0,4,1.8,4,4
+	s-1.8,4-4,4s-4-1.8-4-4S47.8,8,50,8z M50,14c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S48.9,14,50,14z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#C3C2B9" d="M77.1,9L77.1,9c-0.7,0.7-1.5,1-2.3,1c-0.8,0-1.6-0.3-2.3-0.9
+	l-0.2-0.2C71.8,9.6,71,10,70,10H70c-0.9,0-1.8-0.4-2.3-1.1l-0.2,0.2c-0.6,0.6-1.4,0.9-2.3,0.9c-0.8,0-1.6-0.3-2.3-0.9l0,0
+	c-1.2-1.2-1.2-3.3,0-4.5l1.6-1.6C65.1,2.3,65.9,2,66.8,2c0.1,0,0.2,0,0.2,0v0h3H70h3v0c0.1,0,0.2,0,0.2,0c0.8,0,1.6,0.3,2.2,0.9
+	l1.6,1.6C78.3,5.7,78.3,7.8,77.1,9z M75.6,5.9l-1.6-1.6C73.8,4.1,73.4,4,73.2,4c0,0-0.2,0-0.2,0h-2h-1H70h-1h-2c0,0-0.2,0-0.2,0
+	c-0.2,0-0.5,0-0.8,0.3l-1.6,1.6c-0.5,0.5-0.5,1.2,0,1.7l0,0C64.6,7.9,64.9,8,65.2,8c0.3,0,0.6-0.1,0.8-0.3l0.2-0.2l1.4-1.4
+	C67.7,6,67.9,6,68,6.1l1.2,1.5C69.4,7.9,69.7,8,70,8H70c0.3,0,0.6-0.1,0.8-0.4L72,6.1c0.1-0.1,0.2-0.1,0.3,0l1.4,1.4l0.2,0.2
+	C74.1,7.9,74.4,8,74.8,8c0.3,0,0.6-0.1,0.8-0.3l0,0C76.1,7.1,76.1,6.4,75.6,5.9z M65,12L65,12c0.6,0,1,0.4,1,1v2.5
+	c0,0.3,0.2,0.5,0.5,0.5h7c0.3,0,0.5-0.2,0.5-0.5V13c0-0.5,0.4-1,1-1h0c0.5,0,1,0.4,1,1v4c0,0.5-0.4,1-1,1h-1h-8h-1c-0.5,0-1-0.4-1-1
+	v-4C64,12.4,64.4,12,65,12z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#C3C2B9" d="M93,17h-6c-3.9,0-7-3.1-7-7s3.1-7,7-7h6c3.9,0,7,3.1,7,7
+	S96.9,17,93,17z M93,5h-6c-2.8,0-5,2.2-5,5s2.2,5,5,5h6c2.8,0,5-2.2,5-5S95.8,5,93,5z M87,13c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3
+	S88.7,13,87,13z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#C3C2B9" d="M117,8v9c0,0.6-0.4,1-1,1h-12c-0.6,0-1-0.4-1-1V8h-2V7
+	c0-0.6,0.4-1,1-1h2h2V3c0-0.6,0.4-1,1-1h6c0.6,0,1,0.4,1,1v3h2h2c0.6,0,1,0.4,1,1v1H117z M112,4h-4v2h4V4z M115,8h-1h-8h-1v8h10V8z
+	 M107.5,10h1c0.3,0,0.5,0.2,0.5,0.5v3c0,0.3-0.2,0.5-0.5,0.5h-1c-0.3,0-0.5-0.2-0.5-0.5v-3C107,10.2,107.2,10,107.5,10z M111.5,10h1
+	c0.3,0,0.5,0.2,0.5,0.5v3c0,0.3-0.2,0.5-0.5,0.5h-1c-0.3,0-0.5-0.2-0.5-0.5v-3C111,10.2,111.2,10,111.5,10z"/>
+<path fill="#F05451" d="M15,23c-0.3-0.6-0.7-1-1.3-1H6.2c-0.6,0-0.9,0.4-1.2,1l-4,7v7c0,0.6,0.4,1,1,1h16c0.6,0,1-0.4,1-1v-7L15,23z
+	 M6.7,24h6.5l2.9,5h-3.6c-0.3,0-0.5,0.2-0.5,0.5v0.4c0,1-0.8,2-1.8,2.1C9,32.1,8,31.2,8,30v-0.5C8,29.2,7.8,29,7.5,29H3.9L6.7,24z
+	 M16.5,36h-13C3.2,36,3,35.8,3,35.5V31h3.1c0.4,1.7,2,3,3.9,3s3.4-1.3,3.9-3H17v4.5C17,35.8,16.8,36,16.5,36z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#F05451" d="M37.7,26.5L30.5,34v0H26v-4.5l7.5-7.2c0.2-0.2,0.5-0.3,0.7-0.3
+	c0.3,0,0.5,0.1,0.7,0.3l2.8,2.8C38.1,25.5,38.1,26.1,37.7,26.5z M34.2,24.4L28,30.3V32h1.7l5.9-6.2L34.2,24.4z M27,24h-2.5
+	c-0.3,0-0.5,0.2-0.5,0.5v11c0,0.3,0.2,0.5,0.5,0.5h11c0.3,0,0.5-0.2,0.5-0.5V33c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1
+	H23c-0.6,0-1-0.4-1-1V23c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1S27.6,24,27,24z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#F05451" d="M58,37h-1.5H56h0l0,0c-0.5,0-1-0.5-1-1c0-0.6,0.4-1,1-1h0.5
+	c0.3,0,0.5-0.2,0.5-0.5v-7c0-0.3-0.2-0.5-0.5-0.5H54h-0.8l-0.6-0.6L51.2,25h-2.3l-1.4,1.4L46.8,27H46h-2.5c-0.3,0-0.5,0.2-0.5,0.5v7
+	c0,0.3,0.2,0.5,0.5,0.5H44c0.6,0,1,0.4,1,1s-0.4,1-1,1h-0.5H42c-0.6,0-1-0.4-1-1V26c0-0.6,0.4-1,1-1h4l1.7-1.7
+	c0.2-0.2,0.4-0.3,0.7-0.3h3.2c0.3,0,0.5,0.1,0.7,0.3L54,25h4c0.6,0,1,0.4,1,1v10C59,36.6,58.6,37,58,37z M50,28c2.2,0,4,1.8,4,4
+	s-1.8,4-4,4s-4-1.8-4-4S47.8,28,50,28z M50,34c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C48,33.1,48.9,34,50,34z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#F05451" d="M77.1,29L77.1,29c-0.7,0.7-1.5,1-2.3,1c-0.8,0-1.6-0.3-2.3-0.9
+	l-0.2-0.2C71.8,29.6,71,30,70,30H70c-0.9,0-1.8-0.4-2.3-1.1l-0.2,0.2c-0.6,0.6-1.4,0.9-2.3,0.9c-0.8,0-1.6-0.3-2.3-0.9l0,0
+	c-1.2-1.2-1.2-3.3,0-4.5l1.6-1.6c0.6-0.6,1.4-0.9,2.2-0.9c0.1,0,0.2,0,0.2,0v0h3H70h3v0c0.1,0,0.2,0,0.2,0c0.8,0,1.6,0.3,2.2,0.9
+	l1.6,1.6C78.3,25.7,78.3,27.8,77.1,29z M75.6,25.9l-1.6-1.6c-0.3-0.3-0.7-0.3-0.8-0.3c0,0-0.2,0-0.2,0h-2h-1H70h-1h-2
+	c0,0-0.2,0-0.2,0c-0.2,0-0.5,0-0.8,0.3l-1.6,1.6c-0.5,0.5-0.5,1.2,0,1.7l0,0c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.8-0.3l0.2-0.2
+	l1.4-1.4c0.1-0.1,0.3-0.1,0.3,0l1.2,1.5c0.2,0.2,0.5,0.4,0.8,0.4H70c0.3,0,0.6-0.1,0.8-0.4l1.3-1.6c0.1-0.1,0.2-0.1,0.3,0l1.4,1.4
+	l0.2,0.2c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.8-0.3l0,0C76.1,27.1,76.1,26.4,75.6,25.9z M65,32L65,32c0.6,0,1,0.4,1,1v2.5
+	c0,0.3,0.2,0.5,0.5,0.5h7c0.3,0,0.5-0.2,0.5-0.5V33c0-0.5,0.4-1,1-1h0c0.5,0,1,0.4,1,1v4c0,0.5-0.4,1-1,1h-1h-8h-1c-0.5,0-1-0.4-1-1
+	v-4C64,32.4,64.4,32,65,32z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#F05451" d="M93,37h-6c-3.9,0-7-3.1-7-7s3.1-7,7-7h6c3.9,0,7,3.1,7,7
+	S96.9,37,93,37z M93,25h-6c-2.8,0-5,2.2-5,5s2.2,5,5,5h6c2.8,0,5-2.2,5-5S95.8,25,93,25z M87,33c-1.7,0-3-1.3-3-3c0-1.7,1.3-3,3-3
+	s3,1.3,3,3C90,31.7,88.7,33,87,33z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#F05451" d="M117,28v9c0,0.6-0.4,1-1,1h-12c-0.6,0-1-0.4-1-1v-9h-2v-1
+	c0-0.6,0.4-1,1-1h2h2v-3c0-0.6,0.4-1,1-1h6c0.6,0,1,0.4,1,1v3h2h2c0.6,0,1,0.4,1,1v1H117z M112,24h-4v2h4V24z M115,28h-1h-8h-1v8h10
+	V28z M107.5,30h1c0.3,0,0.5,0.2,0.5,0.5v3c0,0.3-0.2,0.5-0.5,0.5h-1c-0.3,0-0.5-0.2-0.5-0.5v-3C107,30.2,107.2,30,107.5,30z
+	 M111.5,30h1c0.3,0,0.5,0.2,0.5,0.5v3c0,0.3-0.2,0.5-0.5,0.5h-1c-0.3,0-0.5-0.2-0.5-0.5v-3C111,30.2,111.2,30,111.5,30z"/>
+</svg>

lele/responsive-tabbed-navigation/js/main.js

@@ -0,0 +1,52 @@
+jQuery(document).ready(function($){
+	var tabs = $('.cd-tabs');
+	
+	tabs.each(function(){
+		var tab = $(this),
+			tabItems = tab.find('ul.cd-tabs-navigation'),
+			tabContentWrapper = tab.children('ul.cd-tabs-content'),
+			tabNavigation = tab.find('nav');
+
+		tabItems.on('click', 'a', function(event){
+			event.preventDefault();
+			var selectedItem = $(this);
+			if( !selectedItem.hasClass('selected') ) {
+				var selectedTab = selectedItem.data('content'),
+					selectedContent = tabContentWrapper.find('li[data-content="'+selectedTab+'"]'),
+					slectedContentHeight = selectedContent.innerHeight();
+				
+				tabItems.find('a.selected').removeClass('selected');
+				selectedItem.addClass('selected');
+				selectedContent.addClass('selected').siblings('li').removeClass('selected');
+				//animate tabContentWrapper height when content changes 
+				tabContentWrapper.animate({
+					'height': slectedContentHeight
+				}, 200);
+			}
+		});
+
+		//hide the .cd-tabs::after element when tabbed navigation has scrolled to the end (mobile version)
+		checkScrolling(tabNavigation);
+		tabNavigation.on('scroll', function(){ 
+			checkScrolling($(this));
+		});
+	});
+	
+	$(window).on('resize', function(){
+		tabs.each(function(){
+			var tab = $(this);
+			checkScrolling(tab.find('nav'));
+			tab.find('.cd-tabs-content').css('height', 'auto');
+		});
+	});
+
+	function checkScrolling(tabs){
+		var totalTabWidth = parseInt(tabs.children('.cd-tabs-navigation').width()),
+		 	tabsViewport = parseInt(tabs.width());
+		if( tabs.scrollLeft() >= totalTabWidth - tabsViewport) {
+			tabs.parent('.cd-tabs').addClass('is-ended');
+		} else {
+			tabs.parent('.cd-tabs').removeClass('is-ended');
+		}
+	}
+});

program.css

@@ -0,0 +1,201 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	background: #333;
+	font-family: Tahoma, Arial, Helvetica, sans-serif;
+	font-size: 14px;
+	line-height: 20px;
+	color: #222;
+}
+
+a {
+	text-decoration: none;
+	color: #99AECD;
+}
+
+a:hover {
+	text-decoration: underline;
+	color: #4F5D7F;
+}
+
+#wrap {
+	margin: 20px auto 10px auto;
+	width: 1024px;
+	background: #fff;
+	padding: 10px;
+	border: 5px solid #000;
+}
+
+#header {
+	background: #807464 no-repeat;
+	height: 120px;
+}
+
+#header h1 { 
+	font-size: 50px;
+	letter-spacing: -5px;
+	padding: 17px 0 0 10px;
+	margin: 0;
+}
+
+#header h1 a { 
+	color: #D1DDEF;
+	text-decoration: none;
+	font-weight: 600;
+}
+
+#header h1 a:hover {
+	color: #fff;
+}
+
+#header h2 { 
+	padding-top: 17px;
+	padding-left: 10px;
+	padding-bottom: 17px;
+	line-height: 1.2;
+}
+
+#content {
+	margin-top: 10px;
+	width: 1024px;
+}
+
+#content h3 a {
+	text-decoration: underline;
+	color: blue;
+}
+
+#content h3 a:hover {
+}
+
+#content p a {
+	text-decoration: underline;
+	color: blue;
+}
+
+#content p a:hover {
+}
+
+#navigation {
+	float: left;
+	width: 150px;
+}
+
+#navigation h2 {
+	margin: 10px 0 0 0;
+	padding-left: 2px;
+	height: 24px;
+	line-height: 24px;
+	color: #7988AF;
+	font-size: 15px;
+}
+
+#navigation ul {
+	padding: 0 0 15px 30px;
+	list-style-type: square;
+	color: #99AECD;
+	margin-left: -1em;
+}
+
+#navigation ul li a {
+	text-decoration: none;
+	font-weight: 600;
+	color: #0099FF;
+}
+
+#navigation ul li a:hover {
+	color: #3399FF;
+}
+
+#wrapper {
+	float: right;
+	width: 864px;
+	margin-left: 10px;
+}
+
+#main-content {
+	float: left;
+	text-align: justify;
+	width: 609px;
+}
+
+#main-content h2 {
+	font-size: 18px;
+	font-weight: 100;
+	padding: 15px 0 7px 0;
+}
+
+#main-content h2 a {
+	text-decoration: none;
+}
+
+#main-content h3 {
+	margin: 0;
+}
+
+#main-content h4 {
+	margin: 0;
+}
+
+#main-content h5 a {
+	text-decoration: underline;
+	color: blue;
+}
+
+#main-content li {
+	list-style-type:none;
+	margin: 0.8em 0;
+}
+
+#main-content p {
+	margin-top: 0.5em;
+}
+
+.center {
+	text-align: center;
+}
+
+#programcommittee {
+	font-size: 11px;
+	color: #000000;
+}
+
+.tpc {
+	float: right;
+	width: 220px;
+}
+
+.tpc h2 {
+	margin: 10px 0 0 0;
+	padding-left: 10px;
+	height: 24px;
+	line-height: 24px;
+	color: #7988AF;
+	font-size: 14px;
+}
+
+.tpc ul {
+	padding: 10px -5px 15px 30px;
+	list-style-type: none;
+	color: #99AECD;
+}
+
+.tpc ul li a {
+	text-decoration: none;
+	font-weight: 600;
+}
+
+.tpc ul li a:hover {
+
+}
+
+#footer {
+text-align: center;
+font-size: 9px;
+color: #aaa;
+}
+#footer a { color: #aaa; }
+#footer a:hover { color: #111; }

style-2.css

@@ -0,0 +1,196 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	background: #333;
+	font-family: Tahoma, Arial, Helvetica, sans-serif;
+	font-size: 14px;
+	line-height: 20px;
+	color: #222;
+}
+
+a {
+	text-decoration: none;
+	color: #99AECD;
+}
+
+a:hover {
+	text-decoration: underline;
+	color: #4F5D7F;
+}
+
+#wrap {
+	margin: 20px auto 10px auto;
+	width: 1024px;
+	background: #fff;
+	padding: 10px;
+	border: 5px solid #000;
+}
+
+#header {
+	background: #807464 no-repeat;
+	height: 120px;
+}
+
+#header h1 { 
+	font-size: 50px;
+	letter-spacing: -5px;
+	padding: 17px 0 0 10px;
+	margin: 0;
+}
+
+#header h1 a { 
+	color: #D1DDEF;
+	text-decoration: none;
+	font-weight: 600;
+}
+
+#header h1 a:hover {
+	color: #fff;
+}
+
+#header h2 { 
+	padding-top: 17px;
+	padding-left: 10px;
+	padding-bottom: 17px;
+	line-height: 1.2;
+}
+
+#content {
+	margin-top: 10px;
+	width: 1024px;
+}
+
+#content h3 a {
+	text-decoration: underline;
+	color: blue;
+}
+
+#content h3 a:hover {
+}
+
+#content p a {
+	text-decoration: underline;
+	color: blue;
+}
+
+#content p a:hover {
+}
+
+#navigation {
+	float: left;
+	width: 150px;
+}
+
+#navigation h2 {
+	margin: 10px 0 0 0;
+	padding-left: 2px;
+	height: 24px;
+	line-height: 24px;
+	color: #7988AF;
+	font-size: 15px;
+}
+
+#navigation ul {
+	padding: 0 0 15px 30px;
+	list-style-type: square;
+	color: #99AECD;
+	margin-left: -1em;
+}
+
+#navigation ul li a {
+	text-decoration: none;
+	font-weight: 600;
+	color: #0099FF;
+}
+
+#navigation ul li a:hover {
+	color: #3399FF;
+}
+
+#wrapper {
+	float: right;
+	width: 864px;
+	margin-left: 10px;
+}
+
+#main-content {
+	float: left;
+	text-align: justify;
+	width: 609px;
+}
+
+#main-content h2 {
+	font-size: 18px;
+	font-weight: 100;
+	padding: 15px 0 7px 0;
+}
+
+#main-content h2 a {
+	text-decoration: none;
+}
+
+#main-content h3 {
+	margin: 0;
+}
+
+#main-content h4 {
+	color: #668FCD;
+	margin: 0;
+}
+
+#main-content li {
+	list-style-type:none;
+}
+
+#main-content p {
+	margin-top: 0.5em;
+}
+
+.center {
+	text-align: center;
+}
+
+#programcommittee {
+	font-size: 11px;
+	color: #000000;
+}
+
+.tpc {
+	float: right;
+	width: 220px;
+}
+
+.tpc h2 {
+	margin: 10px 0 0 0;
+	padding-left: 10px;
+	height: 24px;
+	line-height: 24px;
+	color: #7988AF;
+	font-size: 14px;
+}
+
+.tpc ul {
+	padding: 10px -5px 15px 30px;
+	list-style-type: none;
+	color: #99AECD;
+}
+
+.tpc ul li a {
+	text-decoration: none;
+	font-weight: 600;
+}
+
+.tpc ul li a:hover {
+
+}
+
+#footer {
+text-align: center;
+font-size: 9px;
+color: #aaa;
+}
+#footer a { color: #aaa; }
+#footer a:hover { color: #111; }