This is unfinished and will be an ongoing collection of resources and references.side-menu.css: slide out responsive side menu styles;link-s

3/17/2014 - 7:27 PM

This is unfinished and will be an ongoing collection of resources and references.side-menu.css: slide out responsive side menu styles;link-s

This is unfinished and will be an ongoing collection of resources and references.side-menu.css: slide out responsive side menu styles;link-styles.css: side menu link styles (and other link styles to be implemented or removed main.css: general styles and modifications to imported librarieshttp://yui.yahooapis.com/pure/0.4.2/pure.csshttp://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.jshttp://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700

side-menu.css

body {
    color: #777;
    font-family:'NanumGothic', 'Open Sans', 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.pure-img-responsive {
    max-width: 100%;
    height: auto;
}
/*
Add transition to containers so they can push in and out.
*/
 #layout, #menu, .menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
/*
This is the parent `<div>` that contains the menu and the content area.
*/
 #layout {
    position: relative;
    padding-left: 0;
}
#layout.active {
    position: relative;
    left: 200px;
}
#layout.active #menu {
    left: 200px;
    width: 200px;
}
#layout.active .menu-link {
    left: 200px;
}
/*
The content `<div>` is where all your content goes.
*/
 .content {
    margin: 0 auto;
    padding: 0 2em;
    max-width: 1200px;
    margin-bottom: 50px;
    line-height: 1.6em;
}
.header {
    margin: 0;
    color: #011322;
    text-align: center;
    padding: 2.5em 2em 0;
    border-bottom: 1px solid #eee;
}
.header h1 {
    margin: 0.2em 0;
    font-size: 3em;
    font-weight: 300;
}
.header h2 {
    font-weight: 300;
    color: #ccc;
    padding: 0;
    margin-top: 0;
}
.content-subhead {
    margin: 50px 0 20px 0;
    font-weight: 300;
    color: #888;
}
/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
 #menu {
    margin-left: -150px;
    /* "#menu" width */
    width: 200px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    /* so the menu or its navicon stays above all content */
    background: #011322;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/*
    All anchors inside the menu should be styled like this.
    */
 #menu a {
    color: #566979;
    border: none;
    padding: .3em 1em;
/*    padding: 0.6em 0 0.6em 0.6em;*/
    text-align: center;
}
/*
    Remove all background/borders, since we are applying them to #menu.
    */
 #menu .pure-menu, #menu .pure-menu ul {
    border: none;
    background: transparent;
}
/*
    Add that light border to separate items into groups.
    */
 #menu .pure-menu ul, #menu .pure-menu .menu-item-divided {
    border-top: 1px solid #333;
}
/*
        Change color of the anchor links on hover/focus.
        */
 #menu .pure-menu li a:hover, #menu .pure-menu li a:focus {
    background: transparent;
    color: #6b87a1;
}
/*
    This styles the selected menu item `<li>`.
    */
 #menu .pure-menu-selected, #menu .pure-menu-heading {

}

#menu .pure-menu-heading {
    background: #64b3a7;
    font-weight: bold;
}
/*
    This styles the selected menu item `<li>`.
    */
 #menu .pure-menu li.pure-menu-selected a:hover {
 	color: #92e8dd;
 }

 #menu .pure-menu ul.cl-effect-17 li.pure-menu-selected a::after {
	background: #92e8dd;;
 }

 #menu .pure-menu li.pure-menu-selected a:hover, #menu .pure-menu-heading:hover {
/*    background: #daf1b3;*/
/*    color: #011322;*/
}
#menu .pure-menu li a:hover, #menu .pure-menu li a:focus {
/*    background: #151d25;*/
}
/*
        This styles a link within a selected menu item `<li>`.
        */
 #menu .pure-menu-selected a {
    color: #64b3a7;
    text-align: center;
}
/*
    This styles the menu heading.
    */
 #menu .pure-menu-heading {
    font-size: 110%;
    color: #011322;
    margin: 0;
}
/* -- Dynamic Button For Responsive Menu -------------------------------------*/

/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/

/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
 .menu-link {
    position: fixed;
    display: block;
    /* show this only on small screens */
    top: 0;
    left: 0;
    /* "#menu width" */
    background: #011322;
    font-size: 10px;
    /* change this value to increase/decrease button size */
    z-index: 10;
    width: 2em;
    height: auto;
    padding: 2.1em 1.6em;
}
.menu-link:hover, .menu-link:focus {
    background: #000;
}
.menu-link span {
    position: relative;
    display: block;
}
.menu-link span, .menu-link span:before, .menu-link span:after {
    background-color: #fff;
    width: 100%;
    height: 0.2em;
}
.menu-link span:before, .menu-link span:after {
    position: absolute;
    margin-top: -0.6em;
    content:" ";
}
.menu-link span:after {
    margin-top: 0.6em;
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */

/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
 @media (min-width: 48em) {
    .header, .content {
        padding-left: 2em;
        padding-right: 2em;
    }
    #layout {
        padding-left: 200px;
        /* left col width "#menu" */
        left: 0;
    }
    #menu {
        left: 150px;
    }
    .menu-link {
        position: fixed;
        left: 150px;
        display: none;
    }
    #layout.active .menu-link {
        left: 150px;
    }
}

@media (max-width: 48em) {
    #menu {
        margin-left: -200px;
    }
    input[type="search"]:focus, input[type="text"]:active {
        width: 50%;

    }
}

@media (min-width: 768px) {
	.ac-text .pure-u-1-2 {
		padding-right: .5em;
		padding-left: .5em;
	}

	.ac-text .pure-u-1-2:first-child {
		padding-left: 0;
	}

	.ac-text .pure-u-1-2:last-child {
		padding-right: 0;
	}
}

main.css

/*=============================================
=                    SEARCH                  =
=============================================*/
.search {
  float: right;
}

input[type="search"], input[type="text"] {
  box-shadow: none;
  border: none;
  border-radius: 1px;
  background-color: #768796;
  font-family: NanumGothic, 'Source Sans Pro', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  width: 25%;
}


input[type="search"]:focus, input[type="text"]:focus {
  outline: #c5de9d auto 1px;
  background: #daf1b3 !important;
  width: 25%;
}




/*=============================================
=              ACCORDIAN/TOGGLES              =
=============================================*/
.container {
  width: 100%;
  margin: 10px auto;
}

.ac-label {
  font-weight: 700;
  position: relative;
  padding: .5em 1em;
  margin-bottom: .5em;
  display: block;
  cursor: pointer;
  color: #011322;
  background-color: #78bfb6;
  text-transform: uppercase;
  transition: background-color .15s ease-in-out;
}

.ac-input:checked + label, .ac-label:hover {
  background-color: #011322;
  color: #78bfb6;
}

.ac-label:after, .ac-input:checked + .ac-label:after {
  content: "+";
  position: absolute;
  display: block;
  right: 0;
  top: 0;
  width: 2em;
  height: 100%;
  line-height: 2.25em;
  text-align: center;
  background-color: #566979;
  color: #011322;
  transition: background-color .15s ease-in-out;
}

.ac-label:hover:after, .ac-input:checked + .ac-label:after {
  background-color: #78bfb6;
  color: #011322;
}

.ac-input:checked + .ac-label:after {
  content: "-";
}

.ac-input {
  display: none;
}

.ac-text, .ac-sub-text {
  opacity: 0;
  height: 0;
  margin-bottom: .5em;
  transition: opacity .5s ease-in-out;
  overflow: hidden;
}

.ac-input:checked ~ .ac-text, .ac-sub .ac-input:checked ~ .ac-sub-text {
  opacity: 1;
  height: auto;
}

.ac-sub .ac-label {
  background: none;
  font-weight: 600;
  padding: .5em 2em;
  margin-bottom: 0;
}

.ac-sub .ac-label:checked {
  background: none;
  border-bottom: 1px solid whitesmoke;
}

.ac-sub .ac-label:after, .ac-sub .ac-input:checked + .ac-label:after {
  left: 0;
  background: none;
}

.ac-sub .ac-input:checked + label, .ac-sub .ac-label:hover {
  background: none;
}

.ac-label a {
  color: #011322;
  text-decoration: none;
}

.ac-label a:focus, .ac-label a:active {
  color: #78bfb6;
  text-decoration: none;
}

.ac-sub-text {
  padding: 0 1em 0 2em;
}

.reference, .reference:visited, h2 .reference, h2 .reference:visited {
  font-size: 12px !important;
  text-decoration: none;
  color: #566979;
}

.reference:hover, .reference:focus, .reference:active, h2 .reference:hover, h2 .reference:focus, h2 .reference:active {
  color: #f5686a;
  text-decoration: none;
}

/*=============================================
=                 CONTENT ITEMS               =
=============================================*/

.cheat-item a{
	text-decoration: none;
  font-size: 1.2em;
  color: #011322;

}



/*=============================================
=          GIST FORMAT MODIFICATIONS          =
=============================================*/

.gist, .gist-file, .gist .gist-file {
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Source Code Pro', Monaco, Consolas, "Liberation Mono", Courier, monospace;
}

.gist .gist-file {
  border: 1px solid #eef0f7 !important;
}

.gist {
  border-bottom: none !important;
}

.gist pre {
  font-size: 13px !important;
  line-height: 18px !important;
  font-family: 'Source Code Pro', Monaco, Consolas, "Liberation Mono", Courier, monospace !important;
}


.gist .gist-file .gist-meta {
  text-shadow: none !important;
  background-image: none !important;
  padding: 5px !important;
  color: #737996 !important;
  background-color: #e9eced !important;
}

.line-numbers {
  display: none;
}

/*-----  End of Section comment block  ------*/

/*=============================================
=                      LINKS                  =
=============================================*/

link-styles.css

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


nav ul li a {
	position: relative;
	display: inline-block;
	margin: 5px 12px;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.35em;
}

nav ul li a:hover,
nav ul li a:focus {
	outline: none;
}

/* Effect 1: Brackets */
.cl-effect-1 a::before,
.cl-effect-1 a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
	margin-right: 10px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.cl-effect-1 a::after {
	margin-left: 10px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */
.cl-effect-2 a {
	line-height: 44px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
}

.cl-effect-2 a span {
	position: relative;
	display: inline-block;
	padding: 0 14px;
	background: #2195de;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.csstransforms3d .cl-effect-2 a span::before {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: #0965a0;
	content: attr(data-hover);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

.cl-effect-2 a:hover span,
.cl-effect-2 a:focus span {
	-webkit-transform: rotateX(90deg) translateY(-22px);
	-moz-transform: rotateX(90deg) translateY(-22px);
	transform: rotateX(90deg) translateY(-22px);
}

.csstransforms3d .cl-effect-2 a:hover span::before,
.csstransforms3d .cl-effect-2 a:focus span::before {
	background: #28a2ee;	
}

/* Effect 3: bottom line slides/fades in */
.cl-effect-3 a {
	padding: 8px 0;
}

.cl-effect-3 a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 4px;
	background: rgba(0,0,0,0.1);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.cl-effect-3 a:hover::after,
.cl-effect-3 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

/* Effect 4: bottom border enlarge */
.cl-effect-4 a {
	padding: 0 0 10px;
}

.cl-effect-4 a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 1px;
	background: #fff;
	content: '';
	opacity: 0;
	-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: height 0.3s, opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.cl-effect-4 a:hover::after,
.cl-effect-4 a:focus::after {
	height: 5px;
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

/* Effect 5: same word slide in */
.cl-effect-5 a {
	overflow: hidden;
	padding: 0 4px;
	height: 1em;
}

.cl-effect-5 a span {
	position: relative;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.cl-effect-5 a span::before {
	position: absolute;
	top: 100%;
	content: attr(data-hover);
	font-weight: 700;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.cl-effect-5 a:hover span,
.cl-effect-5 a:focus span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

/* Effect 5: same word slide in and border bottom */
.cl-effect-6 a {
	margin: 0 10px;
	padding: 10px 20px;
}

.cl-effect-6 a::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	content: '';
	-webkit-transition: top 0.3s;
	-moz-transition: top 0.3s;
	transition: top 0.3s;
}

.cl-effect-6 a::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 2px;
	background: #fff;
	content: '';
	-webkit-transition: height 0.3s;
	-moz-transition: height 0.3s;
	transition: height 0.3s;
}

.cl-effect-6 a:hover::before {
	top: 100%;
	opacity: 1;
}

.cl-effect-6 a:hover::after {
	height: 100%;
} 

/* Effect 7: second border slides up */
.cl-effect-7 a {
	padding: 12px 10px 10px;
	color: #566473;
	text-shadow: none;
	font-weight: 700;
}

.cl-effect-7 a::before,
.cl-effect-7 a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 3px;
	background: #566473;
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: scale(0.85);
	-moz-transform: scale(0.85);
	transform: scale(0.85);
}

.cl-effect-7 a::after {
	opacity: 0;
	-webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: top 0.3s, opacity 0.3s, transform 0.3s;
}

.cl-effect-7 a:hover::before,
.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::before,
.cl-effect-7 a:focus::after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
}

.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::after {
	top: 0%;
	opacity: 1;
}

/* Effect 8: border slight translate */
.cl-effect-8 a {
	padding: 10px 20px;
}

.cl-effect-8 a::before,
.cl-effect-8 a::after  {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #354856;
	content: '';
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.cl-effect-8 a::after  {
	border-color: #fff;
	opacity: 0;
	-webkit-transform: translateY(-7px) translateX(6px);
	-moz-transform: translateY(-7px) translateX(6px);
	transform: translateY(-7px) translateX(6px);
}

.cl-effect-8 a:hover::before,
.cl-effect-8 a:focus::before {
	opacity: 0;
	-webkit-transform: translateY(5px) translateX(-5px);
	-moz-transform: translateY(5px) translateX(-5px);
	transform: translateY(5px) translateX(-5px);
}

.cl-effect-8 a:hover::after,
.cl-effect-8 a:focus::after  {
	opacity: 1;
	-webkit-transform: translateY(0px) translateX(0px);
	-moz-transform: translateY(0px) translateX(0px);
	transform: translateY(0px) translateX(0px);
}

/* Effect 9: second text and borders */
.cl-effect-9 a {
	margin: 0 20px;
	padding: 18px 20px;
}

.cl-effect-9 a::before,
.cl-effect-9 a::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #fff;
	content: '';
	opacity: 0.2;
	-webkit-transition: opacity 0.3s, height 0.3s;
	-moz-transition: opacity 0.3s, height 0.3s;
	transition: opacity 0.3s, height 0.3s;
}

.cl-effect-9 a::after {
	top: 100%;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.cl-effect-9 a span:first-child {
	z-index: 2;
	display: block;
	font-weight: 300;
}

.cl-effect-9 a span:last-child {
	z-index: 1;
	display: block;
	padding: 8px 0 0 0;
	color: rgba(0,0,0,0.4);
	text-shadow: none;
	text-transform: none;
	font-style: italic;
	font-size: 0.75em;
	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

.cl-effect-9 a:hover::before,
.cl-effect-9 a:focus::before {
	height: 6px;
}

.cl-effect-9 a:hover::before,
.cl-effect-9 a:hover::after,
.cl-effect-9 a:focus::before,
.cl-effect-9 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

.cl-effect-9 a:hover span:last-child,
.cl-effect-9 a:focus span:last-child {
	opacity: 1;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}

/* Effect 10: reveal, push out */
.cl-effect-10  {
	position: relative;
	z-index: 1;
}

.cl-effect-10 a {
	overflow: hidden;
	margin: 0 15px;
}

.cl-effect-10 a span {
	display: block;
	padding: 10px 20px;
	background: #0f7c67;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.cl-effect-10 a::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	padding: 10px 20px;
	width: 100%;
	height: 100%;
	background: #fff;
	color: #0f7c67;
	content: attr(data-hover);
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: translateX(-25%);
}

.cl-effect-10 a:hover span,
.cl-effect-10 a:focus span {
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
}

.cl-effect-10 a:hover::before,
.cl-effect-10 a:focus::before {
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	transform: translateX(0%);
}

/* Effect 11: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */
.cl-effect-11 a {
	padding: 10px 0;
	border-top: 2px solid #0972b4;
	color: #0972b4;
	text-shadow: none;
} 

.cl-effect-11 a::before {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	padding: 10px 0;
	max-width: 0;
	border-bottom: 2px solid #fff;
	color: #fff;
	content: attr(data-hover);
	-webkit-transition: max-width 0.5s;
	-moz-transition: max-width 0.5s;
	transition: max-width 0.5s;
}

.cl-effect-11 a:hover::before,
.cl-effect-11 a:focus::before {
	max-width: 100%;
}

/* Effect 12: circle */
.cl-effect-12 a::before,
.cl-effect-12 a::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	border: 2px solid rgba(0,0,0,0.1);
	border-radius: 50%;
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
	transform: translateX(-50%) translateY(-50%) scale(0.2);
}

.cl-effect-12 a::after {
	width: 90px;
	height: 90px;
	border-width: 6px;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
	transform: translateX(-50%) translateY(-50%) scale(0.8);
}

.cl-effect-12 a:hover::before,
.cl-effect-12 a:hover::after,
.cl-effect-12 a:focus::before,
.cl-effect-12 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1);
	transform: translateX(-50%) translateY(-50%) scale(1);
}

/* Effect 13: three circles */
.cl-effect-13 a {
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.cl-effect-13 a::before {
	position: absolute;
	top: 100%;
	left: 50%;
	color: transparent;
	content: '•';
	text-shadow: 0 0 transparent;
	font-size: 1.2em;
	-webkit-transition: text-shadow 0.3s, color 0.3s;
	-moz-transition: text-shadow 0.3s, color 0.3s;
	transition: text-shadow 0.3s, color 0.3s;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	transform: translateX(-50%);
	pointer-events: none;
}

.cl-effect-13 a:hover::before,
.cl-effect-13 a:focus::before {
	color: #fff;
	text-shadow: 10px 0 #fff, -10px 0 #fff;
}

.cl-effect-13 a:hover,
.cl-effect-13 a:focus {
	color: #ba7700;
}

/* Effect 14: border switch */
.cl-effect-14 a {
	padding: 0 20px;
	height: 45px;
	line-height: 45px;
}

.cl-effect-14 a::before,
.cl-effect-14 a::after {
	position: absolute;
	width: 45px;
	height: 2px;
	background: #fff;
	content: '';
	opacity: 0.2;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	pointer-events: none;
}

.cl-effect-14 a::before {
	top: 0;
	left: 0;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
}

.cl-effect-14 a::after {
	right: 0;
	bottom: 0;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transform-origin: 100% 0;
	-moz-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

.cl-effect-14 a:hover::before,
.cl-effect-14 a:hover::after,
.cl-effect-14 a:focus::before,
.cl-effect-14 a:focus::after {
	opacity: 1;
}

.cl-effect-14 a:hover::before,
.cl-effect-14 a:focus::before {
	left: 50%;
	-webkit-transform: rotate(0deg) translateX(-50%);
	-moz-transform: rotate(0deg) translateX(-50%);
	transform: rotate(0deg) translateX(-50%);
}

.cl-effect-14 a:hover::after,
.cl-effect-14 a:focus::after {
	right: 50%;
	-webkit-transform: rotate(0deg) translateX(50%);
	-moz-transform: rotate(0deg) translateX(50%);
	transform: rotate(0deg) translateX(50%);
}

/* Effect 15: scale down, reveal */
.cl-effect-15 a {
	color: rgba(0,0,0,0.2);
	font-weight: 700;
	text-shadow: none;
}

.cl-effect-15 a::before {
	color: #fff;
	content: attr(data-hover);
	position: absolute;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	transform: scale(0.9);
	opacity: 0;
}

/* Effect 16: fall down */
.cl-effect-16 a {
	color: #6f8686;
	text-shadow: 0 0 1px rgba(111,134,134,0.3);
}

.cl-effect-16 a::before {
	color: #fff;
	content: attr(data-hover);
	position: absolute;
	opacity: 0;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	-webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}

.cl-effect-16 a:hover::before,
.cl-effect-16 a:focus::before {
	-webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	-moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	opacity: 1;
}

/* Effect 17: move up fade out, push border */
.cl-effect-17 a {
	color: #10649b;
	text-shadow: none;
	padding: 10px 0;
}

.cl-effect-17 a::before {
	color: #fff;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	content: attr(data-hover);
	position: absolute;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}

.cl-effect-17 a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #6b87a1;
	opacity: 0;
	-webkit-transform: translateY(5px);
	-moz-transform: translateY(5px);
	transform: translateY(5px);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}

.cl-effect-17 a:hover::before,
.cl-effect-17 a:focus::before {
	opacity: 0;
	-webkit-transform: translateY(-2px);
	-moz-transform: translateY(-2px);
	transform: translateY(-2px);
}

.cl-effect-17 a:hover::after,
.cl-effect-17 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

/* Effect 18: cross */
.cl-effect-18 {
	position: relative;
	z-index: 1;
}

.cl-effect-18 a {
	padding: 0 5px;
	color: #b4770d;
	font-weight: 700;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.cl-effect-18 a::before,
.cl-effect-18 a::after {
	position: absolute;
	width: 100%;
	left: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: #b4770d;
	content: '';
	z-index: -1;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}

.cl-effect-18 a::before {
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px);
	transform: translateY(-20px);
}

.cl-effect-18 a::after {
	-webkit-transform: translateY(20px);
	-moz-transform: translateY(20px);
	transform: translateY(20px);
}

.cl-effect-18 a:hover,
.cl-effect-18 a:focus {
	color: #fff;
}

.cl-effect-18 a:hover::before,
.cl-effect-18 a:hover::after,
.cl-effect-18 a:focus::before,
.cl-effect-18 a:focus::after {
	opacity: 0.7;
}

.cl-effect-18 a:hover::before,
.cl-effect-18 a:focus::before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

.cl-effect-18 a:hover::after,
.cl-effect-18 a:focus::after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* Effect 19: 3D side */
.cl-effect-19 a {
	line-height: 2em;
	margin: 15px;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	perspective: 800px;
	width: 200px;
}

.cl-effect-19 a span {
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 0 14px;
	background: #e35041;
	-webkit-transition: -webkit-transform 0.4s, background 0.4s;
	-moz-transition: -moz-transform 0.4s, background 0.4s;
	transition: transform 0.4s, background 0.4s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50% -100px;
	-moz-transform-origin: 50% 50% -100px;
	transform-origin: 50% 50% -100px;
}

.csstransforms3d .cl-effect-19 a span::before {
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	background: #b53a2d;
	content: attr(data-hover);
	-webkit-transition: background 0.4s;
	-moz-transition: background 0.4s;
	transition: background 0.4s;
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transform-origin: 0 50%;
	-moz-transform-origin: 0 50%;
	transform-origin: 0 50%;
	pointer-events: none;
}

.cl-effect-19 a:hover span,
.cl-effect-19 a:focus span {
	background: #b53a2d;
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
}

.csstransforms3d .cl-effect-19 a:hover span::before,
.csstransforms3d .cl-effect-19 a:focus span::before {
	background: #ef5e50;	
}

/* Effect 20: 3D side */
.cl-effect-20 a {
	line-height: 2em;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	perspective: 800px;
}

.cl-effect-20 a span {
	position: relative;
	display: inline-block;
	padding: 3px 15px 0;
	background: #587285;
	box-shadow: inset 0 3px #2f4351;
	-webkit-transition: background 0.6s;
	-moz-transition: background 0.6s;
	transition: background 0.6s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 50%;
	-moz-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
}

.cl-effect-20 a span::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	color: #2f4351;
	content: attr(data-hover);
	-webkit-transform: rotateX(270deg);
	-moz-transform: rotateX(270deg);
	transform: rotateX(270deg);
	-webkit-transition: -webkit-transform 0.6s;
	-moz-transition: -moz-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	pointer-events: none;
}

.cl-effect-20 a:hover span,
.cl-effect-20 a:focus span {
	background: #2f4351;
}

.cl-effect-20 a:hover span::before,
.cl-effect-20 a:focus span::before {
	-webkit-transform: rotateX(10deg);	
	-moz-transform: rotateX(10deg);
	transform: rotateX(10deg);
}

/* Effect 21: borders slight translate */
.cl-effect-21 a {
	padding: 10px;
	color: #237546;
	font-weight: 700;
	text-shadow: none;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.cl-effect-21 a::before,
.cl-effect-21 a::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.cl-effect-21 a::before {
	top: 0;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.cl-effect-21 a::after {
	bottom: 0;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.cl-effect-21 a:hover,
.cl-effect-21 a:focus {
	color: #fff;
}

.cl-effect-21 a:hover::before,
.cl-effect-21 a:focus::before,
.cl-effect-21 a:hover::after,
.cl-effect-21 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

.color-1 {
	background: #435a6b;
}

.color-2 {
	background: #f39c12;
}

.color-3 {
	background: #2ac56c;
}

.color-4 {
	background: #0e83cd;
}

.color-5 {
	background: #cd4436;
}

.color-6 {
	background: #f19f0f;
}

.color-7 {
	background: #3fa46a;
}

.color-8 {
	background: #ecf0f1;
}

.color-9 {
	background: #9e487f;
}

.color-10 {
	background: #16a085;
}

.color-11 {
	background: #aab7b7;
}

jquery.sieve.js

/*!
 * jQuery Sieve v0.3.0 (2013-04-04)
 * http://rmm5t.github.io/jquery-sieve/
 * Copyright (c) 2013 Ryan McGeary; Licensed MIT
 */
(function() {
  var $;

  $ = jQuery;

  $.fn.sieve = function(options) {
    var compact;
    compact = function(array) {
      var item, _i, _len, _results;
      _results = [];
      for (_i = 0, _len = array.length; _i < _len; _i++) {
        item = array[_i];
        if (item) {
          _results.push(item);
        }
      }
      return _results;
    };
    return this.each(function() {
      var container, searchBar, settings;
      container = $(this);
      settings = $.extend({
        searchInput: null,
        searchTemplate: "<div><label>Filter: <input type='text'></label></div>",
        itemSelector: "tbody tr",
        textSelector: null,
        toggle: function(item, match) {
          return item.toggle(match);
        },
        complete: function() {}
      }, options);
      if (!settings.searchInput) {
        searchBar = $(settings.searchTemplate);
        settings.searchInput = searchBar.find("input");
        container.before(searchBar);
      }
      return settings.searchInput.on("keyup.sieve change.sieve", function() {
        var items, query;
        query = compact($(this).val().toLowerCase().split(/\s+/));
        items = container.find(settings.itemSelector);
        items.each(function() {
          var cells, item, match, q, text, _i, _len;
          item = $(this);
          if (settings.textSelector) {
            cells = item.find(settings.textSelector);
            text = cells.text().toLowerCase();
          } else {
            text = item.text().toLowerCase();
          }
          match = true;
          for (_i = 0, _len = query.length; _i < _len; _i++) {
            q = query[_i];
            match && (match = text.indexOf(q) >= 0);
          }
          return settings.toggle(item, match);
        });
        return settings.complete();
      });
    });
  };

}).call(this);

fonts.css

/* Designed by Sandoll Communication */
/* FontFace Generated by FontPro */

@font-face {
  font-family: 'NanumGothic-Bold';
  src: url('fonts/NanumGothic/NanumGothic-Bold.eot');
  src: url('fonts/NanumGothic/NanumGothic-Bold.eot?#iefix') format('embedded-opentype'),
       url('fonts/NanumGothic/NanumGothic-Bold.woff') format('woff'),
       url('fonts/NanumGothic/NanumGothic-Bold.ttf') format('truetype'),
       url('fonts/NanumGothic/NanumGothic-Bold.svg#NanumGothic-Bold') format('svg');
  font-weight: 500;
  font-style: normal;
}


@font-face {
  font-family: 'NanumGothic-ExtraBold';
  src: url('fonts/NanumGothic/NanumGothic-ExtraBold.eot');
  src: url('fonts/NanumGothic/NanumGothic-ExtraBold.eot?#iefix') format('embedded-opentype'),
       url('fonts/NanumGothic/NanumGothic-ExtraBold.woff') format('woff'),
       url('fonts/NanumGothic/NanumGothic-ExtraBold.ttf') format('truetype'),
       url('fonts/NanumGothic/NanumGothic-ExtraBold.svg#NanumGothic-ExtraBold') format('svg');
  font-weight: 700;
  font-style: normal;
}


@font-face {
  font-family: 'NanumGothic';
  src: url('fonts/NanumGothic/NanumGothic-Regular.eot');
  src: url('fonts/NanumGothic/NanumGothic-Regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/NanumGothic/NanumGothic-Regular.woff') format('woff'),
       url('fonts/NanumGothic/NanumGothic-Regular.ttf') format('truetype'),
       url('fonts/NanumGothic/NanumGothic-Regular.svg#NanumGothic') format('svg');
  font-weight: 400;
  font-style: normal;
}

/*
 * Font Mfizz v1.2
 * Copyright 2013 Mfizz Inc, Joe Lauer
 * MIT License
 *
 * Project: http://mfizz.com/oss/font-mfizz
 *
 * The font designed for technology and software geeks representing programming
 * languages, operating systems, software engineering, and technology. 
 *
 * Mfizz Inc
 * Web: http://mfizz.com/
 * Twitter: http://twitter.com/mfizz_inc
 * 
 * Joe Lauer
 * Web: http://lauer.bz/
 * Twitter: http://twitter.com/jjlauer
 */

@font-face {
  font-family: "FontMfizz";
  src: url("fonts/font-mfizz/font-mfizz.eot");
  src: url("fonts/font-mfizz/font-mfizz.eot?#iefix") format("embedded-opentype"),
       url("fonts/font-mfizz/font-mfizz.woff") format("woff"),
       url("fonts/font-mfizz/font-mfizz.ttf") format("truetype"),
       url("fonts/font-mfizz/font-mfizz.svg#font-mfizz") format("svg");
  font-weight: normal;
  font-style: normal;
}

.icon-microscope:before,
.icon-cplusplus:before,
.icon-wireless:before,
.icon-fire-alt:before,
.icon-mobile-device:before,
.icon-objc:before,
.icon-redhat:before,
.icon-freebsd:before,
.icon-heroku:before,
.icon-python:before,
.icon-java:before,
.icon-satellite:before,
.icon-debian:before,
.icon-grails:before,
.icon-c:before,
.icon-postgres:before,
.icon-database-alt2:before,
.icon-raspberrypi:before,
.icon-nginx:before,
.icon-ruby-on-rails:before,
.icon-redis:before,
.icon-scala:before,
.icon-gnome:before,
.icon-perl:before,
.icon-mysql:before,
.icon-fedora:before,
.icon-ghost:before,
.icon-google:before,
.icon-netbsd:before,
.icon-aws:before,
.icon-bomb:before,
.icon-looking:before,
.icon-ruby:before,
.icon-mysql-alt:before,
.icon-playframework-alt:before,
.icon-osx:before,
.icon-database:before,
.icon-database-alt:before,
.icon-shell:before,
.icon-script:before,
.icon-antenna:before,
.icon-coffee-bean:before,
.icon-scala-alt:before,
.icon-platter:before,
.icon-java-duke:before,
.icon-iphone:before,
.icon-script-alt:before,
.icon-google-alt:before,
.icon-haskell:before,
.icon-mariadb:before,
.icon-phone-retro:before,
.icon-phone-alt:before,
.icon-csharp:before,
.icon-php:before,
.icon-postgres-alt:before,
.icon-html:before,
.icon-mfizz:before,
.icon-apache:before,
.icon-hadoop:before,
.icon-ruby-on-rails-alt:before,
.icon-mobile-phone-broadcast:before,
.icon-css:before,
.icon-playframework:before,
.icon-clojure:before,
.icon-mobile-phone-alt:before,
.icon-suse:before,
.icon-java-bold:before,
.icon-nginx-alt:before,
.icon-nginx-alt2:before,
.icon-linux-mint:before,
.icon-dreamhost:before,
.icon-blackberry:before,
.icon-javascript:before,
.icon-ubuntu:before,
.icon-php-alt:before,
.icon-centos:before,
.icon-nodejs:before,
.icon-splatter:before,
.icon-3dprint:before,
.icon-line-graph:before,
.icon-cassandra:before,
.icon-solaris:before,
.icon-jetty:before,
.icon-tomcat:before,
.icon-oracle:before,
.icon-oracle-alt:before,
.icon-mssql:before,
.icon-google-developers:before,
.icon-google-code:before,
.icon-kde:before,
.icon-grails-alt:before {
  font-family: "FontMfizz";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
}

.icon-microscope:before { content: "\f100"; }
.icon-cplusplus:before { content: "\f101"; }
.icon-wireless:before { content: "\f102"; }
.icon-fire-alt:before { content: "\f103"; }
.icon-mobile-device:before { content: "\f104"; }
.icon-objc:before { content: "\f105"; }
.icon-redhat:before { content: "\f106"; }
.icon-freebsd:before { content: "\f107"; }
.icon-heroku:before { content: "\f108"; }
.icon-python:before { content: "\f109"; }
.icon-java:before { content: "\f10a"; }
.icon-satellite:before { content: "\f10b"; }
.icon-debian:before { content: "\f10c"; }
.icon-grails:before { content: "\f10d"; }
.icon-c:before { content: "\f10e"; }
.icon-postgres:before { content: "\f10f"; }
.icon-database-alt2:before { content: "\f110"; }
.icon-raspberrypi:before { content: "\f111"; }
.icon-nginx:before { content: "\f112"; }
.icon-ruby-on-rails:before { content: "\f113"; }
.icon-redis:before { content: "\f114"; }
.icon-scala:before { content: "\f115"; }
.icon-gnome:before { content: "\f116"; }
.icon-perl:before { content: "\f117"; }
.icon-mysql:before { content: "\f118"; }
.icon-fedora:before { content: "\f119"; }
.icon-ghost:before { content: "\f11a"; }
.icon-google:before { content: "\f11b"; }
.icon-netbsd:before { content: "\f11c"; }
.icon-aws:before { content: "\f11d"; }
.icon-bomb:before { content: "\f11e"; }
.icon-looking:before { content: "\f11f"; }
.icon-ruby:before { content: "\f120"; }
.icon-mysql-alt:before { content: "\f121"; }
.icon-playframework-alt:before { content: "\f122"; }
.icon-osx:before { content: "\f123"; }
.icon-database:before { content: "\f124"; }
.icon-database-alt:before { content: "\f125"; }
.icon-shell:before { content: "\f126"; }
.icon-script:before { content: "\f127"; }
.icon-antenna:before { content: "\f128"; }
.icon-coffee-bean:before { content: "\f129"; }
.icon-scala-alt:before { content: "\f12a"; }
.icon-platter:before { content: "\f12b"; }
.icon-java-duke:before { content: "\f12c"; }
.icon-iphone:before { content: "\f12d"; }
.icon-script-alt:before { content: "\f12e"; }
.icon-google-alt:before { content: "\f12f"; }
.icon-haskell:before { content: "\f130"; }
.icon-mariadb:before { content: "\f131"; }
.icon-phone-retro:before { content: "\f132"; }
.icon-phone-alt:before { content: "\f133"; }
.icon-csharp:before { content: "\f134"; }
.icon-php:before { content: "\f135"; }
.icon-postgres-alt:before { content: "\f136"; }
.icon-html:before { content: "\f137"; }
.icon-mfizz:before { content: "\f138"; }
.icon-apache:before { content: "\f139"; }
.icon-hadoop:before { content: "\f13a"; }
.icon-ruby-on-rails-alt:before { content: "\f13b"; }
.icon-mobile-phone-broadcast:before { content: "\f13c"; }
.icon-css:before { content: "\f13d"; }
.icon-playframework:before { content: "\f13e"; }
.icon-clojure:before { content: "\f13f"; }
.icon-mobile-phone-alt:before { content: "\f140"; }
.icon-suse:before { content: "\f141"; }
.icon-java-bold:before { content: "\f142"; }
.icon-nginx-alt:before { content: "\f143"; }
.icon-nginx-alt2:before { content: "\f144"; }
.icon-linux-mint:before { content: "\f145"; }
.icon-dreamhost:before { content: "\f146"; }
.icon-blackberry:before { content: "\f147"; }
.icon-javascript:before { content: "\f148"; }
.icon-ubuntu:before { content: "\f149"; }
.icon-php-alt:before { content: "\f14a"; }
.icon-centos:before { content: "\f14b"; }
.icon-nodejs:before { content: "\f14c"; }
.icon-splatter:before { content: "\f14d"; }
.icon-3dprint:before { content: "\f14e"; }
.icon-line-graph:before { content: "\f14f"; }
.icon-cassandra:before { content: "\f150"; }
.icon-solaris:before { content: "\f151"; }
.icon-jetty:before { content: "\f152"; }
.icon-tomcat:before { content: "\f153"; }
.icon-oracle:before { content: "\f154"; }
.icon-oracle-alt:before { content: "\f155"; }
.icon-mssql:before { content: "\f156"; }
.icon-google-developers:before { content: "\f157"; }
.icon-google-code:before { content: "\f158"; }
.icon-kde:before { content: "\f159"; }
.icon-grails-alt:before { content: "\f15a"; }

/* These classes only added to fix FontFamily to display FontMfizz during debug/inspection */
.icon-osx,
.icon-bomb,
.icon-mobile-phone-broadcast,
.icon-objc,
.icon-nginx-alt2,
.icon-mysql,
.icon-phone-retro,
.icon-netbsd,
.icon-mobile-device,
.icon-ruby-on-rails,
.icon-phone-alt,
.icon-line-graph,
.icon-postgres,
.icon-playframework,
.icon-python,
.icon-ruby-on-rails-alt,
.icon-nginx,
.icon-database-alt2,
.icon-google-alt,
.icon-microscope,
.icon-blackberry,
.icon-dreamhost,
.icon-google,
.icon-centos,
.icon-kde,
.icon-csharp,
.icon-scala,
.icon-redis,
.icon-looking,
.icon-database-alt,
.icon-javascript,
.icon-postgres-alt,
.icon-linux-mint,
.icon-ubuntu,
.icon-apache,
.icon-script-alt,
.icon-mssql,
.icon-c,
.icon-gnome,
.icon-java-duke,
.icon-scala-alt,
.icon-clojure,
.icon-oracle-alt,
.icon-redhat,
.icon-haskell,
.icon-3dprint,
.icon-mariadb,
.icon-java,
.icon-script,
.icon-cplusplus,
.icon-jetty,
.icon-perl,
.icon-heroku,
.icon-nginx-alt,
.icon-iphone,
.icon-splatter,
.icon-shell,
.icon-mysql-alt,
.icon-wireless,
.icon-ruby,
.icon-playframework-alt,
.icon-raspberrypi,
.icon-suse,
.icon-nodejs,
.icon-java-bold,
.icon-google-developers,
.icon-mobile-phone-alt,
.icon-grails-alt,
.icon-coffee-bean,
.icon-cassandra,
.icon-google-code,
.icon-fedora,
.icon-antenna,
.icon-hadoop,
.icon-solaris,
.icon-html,
.icon-css,
.icon-satellite,
.icon-aws,
.icon-mfizz,
.icon-php,
.icon-debian,
.icon-ghost,
.icon-php-alt,
.icon-tomcat,
.icon-database,
.icon-grails,
.icon-freebsd,
.icon-oracle,
.icon-fire-alt,
.icon-platter{
  font-family: "FontMfizz";
}

.font-mizz {
  font-family: FontMizz;
  font-size: 1.2em;
}

dev-cheatsheet.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="canonical" href="http://www.carolineartz.me/dbc-portfolio/cheatsheet/dev-cheatsheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Quick references and resources for web development">

    <title>DBC Cheatsheet &amp; QuickRef</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure.css">
    <link rel="stylesheet" href="css/layouts/side-menu.css">
    <link rel="stylesheet" href="css/component.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/fonts.css">

    <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700' rel='stylesheet' type='text/css'>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


    <!--[if lte IE 8]>
        <link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
    <![endif]-->

</head>

<body>
    <div id="layout">
        <!-- Menu toggle -->
        <a href="#menu" id="menuLink" class="menu-link">
            <!-- Hamburger icon -->
            <span></span>
        </a>

        <aside id="menu">
            <nav class="pure-menu pure-menu-open">
                <a class="pure-menu-heading" href="#">Menu</a>

                <ul class="cl-effect-17">
                    <li><a href="#ruby-javascript"><i class="font-mizz icon-ruby"></i>&nbsp;vs&nbsp;<i class="font-mizz icon-javascript"></i></a>
                    </li>
                    <li><a href="#ruby">Ruby</a>
                    </li>

                    <li class="menu-item-divided">
                        <a href="#javascript">JavaScript</a>
                    </li>

                    <li><a href="#utilities">Utilities</a>
                    </li>
                </ul>
            </nav>
        </aside>

        <div id="main">


            <div class="header">
                <h1>DevRef</h1>
                <h2>for Rails Developers</h2>
            </div>

            <div class="content">
                <div class="container">
                    <div class="search-sieve">


                        <!-- /*=============================================
                                        Ruby vs JavaScript              
                        =============================================*/ -->
                        <section class="ruby-javascript">

                            <h2 id="ruby-javascript" class="cheat-item">
                                <a name="ruby-javascript" title="Ruby vs JavaScript">Ruby vs JavaScript</a><a title="Agent Cooper- js ruby comparison" class="reference" href="http://agentcooper.github.io/js-ruby-comparison/">&nbsp;[source]</a>
                            </h2>


                            <div class="content-group">
                                <div class="ac">

                                    <input class="ac-input" id="ac-ruby-javascript-array" name="ac-ruby-javascript-array" type="checkbox" />
                                    <label class="ac-label" for="ac-ruby-javascript-array">
                                        <a title="Ruby vs JavaScript-Arrays" name="ruby-javascript-array"></a>Arrays</label>

                                    <article class="ac-text">

                                        <div class="pure-g-r">
                                            <div class="pure-u-1-2">
                                                <h3 class="section-title"><a name="ruby-arrays">Ruby Arrays</a>
                                                </h3>
                                                <script src="https://gist.github.com/carolineartz/6361899ce6f15f6863af.js"></script>
                                            </div>
                                            <div class="pure-u-1-2">
                                                <h3 class="section-title">JavaScript Arrays</h3>
                                                <script src="https://gist.github.com/carolineartz/531d89a318a714d781f9.js"></script>
                                            </div>
                                        </div>
                                    </article>

                                </div>
                                <div class="ac">
                                    <input class="ac-input" id="ac-ruby-javascript-string" name="ac-ruby-javascript-string" type="checkbox" />
                                    <label class="ac-label" for="ac-ruby-javascript-string">Strings</label>
                                    <article class="ac-text">
                                        <div class="pure-g-r">
                                            <div class="pure-u-1-2">
                                                <h3 class="section-title">Ruby Strings</h3>
                                                <script src="https://gist.github.com/carolineartz/b6a64f0976152e8b7d45.js"></script>
                                            </div>
                                            <div class="pure-u-1-2">
                                                <h3 class="section-title">JavaScript Strings</h3>
                                                <script src="https://gist.github.com/carolineartz/bdf1e36b466b8a08c592.js"></script>
                                            </div>
                                        </div>
                                    </article>

                                </div>


                                <div class="ac">
                                    <input class="ac-input" id="ac-ruby-javascript-hash" name="ac-ruby-javascript-hash" type="checkbox" />
                                    <label class="ac-label" for="ac-ruby-javascript-hash">Hash Map</label>
                                    <article class="ac-text">
                                        <div class="pure-g-r">
                                            <div class="pure-u-1-2">
                                                <h3 class="section-title">Ruby Hash</h3>
                                                <script src="https://gist.github.com/carolineartz/943085f62baa138cd967.js"></script>
                                            </div>
                                            <div class="pure-u-1-2">
                                                <h3 class="section-title">JavaScript Object Literals</h3>
                                                <script src="https://gist.github.com/carolineartz/b31059cdce5b4fb344b0.js"></script>
                                            </div>
                                        </div>
                                    </article>

                                </div>
                                <div class="ac">
                                    <input class="ac-input" id="ac-ruby-javascript-methods" name="ac-ruby-javascrit-methods" type="checkbox" />
                                    <label class="ac-label" for="ac-ruby-javascript-methods">Functions &amp; Methods</label>
                                    <article class="ac-text">
                                        <div class="pure-g-r">
                                            <div class="pure-u-1-2">
                                                <h3 class="section-title">Ruby Methods</h3>
                                                <script src="https://gist.github.com/carolineartz/1d24537c449a7cce0578.js"></script>
                                            </div>
                                            <div class="pure-u-1-2">
                                                <h3 class="section-title">JavaScript Functions &amp; Methods</h3>
                                                <script src="https://gist.github.com/carolineartz/2f30212fe33eb31dbd84.js"></script>
                                            </div>
                                        </div>
                                    </article>

                                </div>
                                <div class="ac">
                                    <input class="ac-input" id="ac-ruby-javascript-classes" name="ac-ruby-javascript-classes" type="checkbox" />
                                    <label class="ac-label" for="ac-ruby-javascript-classes">Classes &amp; Prototypes</label>
                                    <article class="ac-text">
                                        <div class="pure-g-r">
                                            <div class="pure-u-1-2">
                                                <h3 class="section-title">Ruby Classes</h3>
                                                <script src="https://gist.github.com/carolineartz/970a640289e05e67a1b6.js"></script>
                                            </div>
                                            <div class="pure-u-1-2">
                                                <h3 class="section-title">JavaScript Prototypes</h3>
                                                <script src="https://gist.github.com/carolineartz/976d2e403c7e8dc590a8.js"></script>
                                            </div>
                                        </div>
                                    </article>

                                </div>
                                <div class="ac">
                                    <input class="ac-input" id="ac-ruby-javascript-misc" name="ac-ruby-javascript-misc" type="checkbox" />
                                    <label class="ac-label" for="ac-ruby-javascript-misc">Misc.</label>
                                    <article class="ac-text">
                                        <div class="pure-g-r">
                                            <div class="pure-u-1-2">
                                                <h3 class="section-title">Ruby</h3>
                                                <script src="https://gist.github.com/carolineartz/06031722ecfbeb948d4e.js"></script>
                                            </div>
                                            <div class="pure-u-1-2">
                                                <h3 class="section-title">JavaScript</h3>
                                                <script src="https://gist.github.com/carolineartz/ce6ff2154e213c79e2c9.js"></script>
                                            </div>
                                        </div>
                                    </article>

                                </div>
                            </div>
                        </section>
                        <!-- /*=======================================
                       =                     Ruby                     =
                         =============================================*/ -->
                        <section class="ruby">

                            <h2 class="cheat-item">
                                <a name="ruby" title="Ruby Resources">Ruby Resources</a>
                            </h2>
                            <div class="content-group">
                                <div class="ac">
                                    <input class="ac-input" id="ac-ruby-cheatsheet" name="ac-ruby-cheatsheet" type="checkbox" />
                                    <label class="ac-label" for="ac-ruby-cheatsheet">Ruby QuickRef</label>
                                    <article class="ac-text">
                                        <a title="Ruby Cheat " class="reference" href="www.cheat-sheets.org/saved-copy/RubyCheat.pdf‎">&nbsp;[source]</a>
                                        <object width="100%" height="900px" data="files/RubyCheat.pdf"></object>
                                    </article>

                                </div>
                                <div class="ac">
                                    <input class="ac-input" id="ac-ruby-links" name="ac-ruby-links" type="checkbox" />
                                    <label class="ac-label" for="ac-ruby-links">Ruby Links</label>
                                    <article class="ac-text">
                                        TODO
                                    </article>

                                </div>
                            </div>
                        </section>

                        <!-- /*=============================================
                                          JavaScript & jQuery             
                        =============================================*/ -->
                        <section class="javascript">

                            <h2 class="cheat-item">
                                <a name="javascript" title="Terminal">Javascript</a>
                            </h2>
                            <div class="content-group">
                                <div class="ac">
                                    <input class="ac-input" id="ac-javascript-links" name="ac-javascript-links" type="checkbox" />
                                    <label class="ac-label" for="ac-javascript-links">JavaScript QuickRef</label>
                                    <article class="ac-text">
                                        TODO
                                    </article>

                                </div>

                            </div>
                        </section>


                        <!-- /*=============================================
                                             Utilities                 
                         =============================================*/ -->

                        <section class="utilities">

                            <h2 class="cheat-item">
                                <a name="utilities" title="Utilities">Utilities</a>
                            </h2>
                            <div class="content-group">
                                <div class="ac">
                                    <input class="ac-input" id="ac-size-calculator" name="ac-size-calculator" type="checkbox" />
                                    <label class="ac-label" for="ac-size-calculator">Size Calculator</label>
                                    <article class="ac-text">
                                        <iframe style="width: 100%; height: 800px;" seamless="seamless" src="http://oscarotero.com/size/" seamless frameborder="0" sandbox="allow-same-origin, allow-forms, allow-scripts" scrolling="no"></iframe>
                                    </article>

                                </div>
                                <div class="ac">
                                    <input class="ac-input" id="ac-terminal-bash" name="ac-terminal-bash" type="checkbox" />
                                    <label class="ac-label" for="ac-terminal-bash">Bash</label>
                                    <article class="ac-text">
                                        <a title="Bash Cheatsheet " class="reference" href="http://codepen.io/atelierbram/full/muCqH">&nbsp;[source]</a>
                                        <p data-height="1200" data-theme-id="4703" data-slug-hash="uJBHt" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/carolineartz/pen/uJBHt'>Original Bash cheatsheet</a> by Bram de Haan (<a href='http://codepen.io/carolineartz'>@carolineartz</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
                                        <script async src="//codepen.io/assets/embed/ei.js"></script>
                                    </article>

                                </div>
                                <div class="ac">
                                    <input class="ac-input" id="ac-terminal-git" name="ac-terminal-git" type="checkbox" />
                                    <label class="ac-label" for="ac-terminal-git">Git</label>
                                    <article class="ac-text">
                                        <a title="Git Cheatsheet " class="reference" href="http://codepen.io/nedf23/pen/EKpza">&nbsp;[source]</a>
                                        <p data-height="2200" data-theme-id="4703" data-slug-hash="uwFLa" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/carolineartz/pen/uwFLa'>Original Cheatsheet</a> by Ned Fenstermacher(<a href='http://codepen.io/atelierbram/'>@atelierbram</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
                                        <script async src="//codepen.io/assets/embed/ei.js"></script>
                                    </article>

                                </div>
                                <div class="ac">
                                    <input class="ac-input" id="ac-utilities-sublime" name="ac-utilities-sublime" type="checkbox" />
                                    <label class="ac-label" for="ac-utilities-sublime">Sublime Text 3</label>
                                    <article class="ac-text">
                                        <a title="Sublime Text 3 Cheatsheet " class="reference" href="http://codepen.io/emilyyoung/pen/ozvnC">&nbsp;[source]</a>
                                        <p data-height="2700" data-theme-id="4703" data-slug-hash="rImJj" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/carolineartz/pen/rImJj'>Original Sublime Text Cheat Sheet</a> by Emily Young (<a href='http://codepen.io/emilyyoung/'>@emilyyoung</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
                                        <script async src="//codepen.io/assets/embed/ei.js"></script>
                                    </article>

                                </div>
                            </div>
                        </section>

                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="js/jquery.sieve.js"></script>

    <script>
    var itemSelector = "<div class='row form-inline' style='float:right;'><label style='float: right;'>Filter: <input type='text' class='form-control' placeholder='(start typing)'></label></div>";


    $(document).ready(function() {
        $("div.search-sieve").sieve({
            itemSelector: "label"
        });
    });
    </script>
    <script src="js/ui.js"></script>


</body>

</html>

*preview.md

Rendered
Source

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

This is unfinished and will be an ongoing collection of resources and references.side-menu.css: slide out responsive side menu styles;link-s