nakome
9/9/2013 - 11:28 PM
A Pen by Moncho Varela.
A Pen by Moncho Varela.
/* = imports
________________________*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400);
/* Demo grids
----------------------*/
.grid {display: block;padding: 0.5em;margin: 0.5em;}
.btn {margin: 0.5em;}
/*
*
* Biru Framework 1.0v
*
* Copyright 2012 @nakome & @aryandhani
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Included in this file:
* -> Base.
* -> Grid.
* -> Plugins.
* -> Utilities.
* -> Theme.
*/
/*==============================================
* BASE Inspired by yuilibrary.com
================================================*/
/* = Menu
---------------------------------*/
.menu ul{
position:absolute;
visibility:hidden;
}
.menu.menu-open{
visibility:visible;
z-index:2;
width:100%;
}
.menu ul{
left:-10000px;
list-style:none;
margin:0;
padding:0;
top:-10000px;
z-index:1;
}
.menu>ul{
position:relative;
}
.menu-open>ul{
left:0;
top:0;
visibility:visible;
}
.menu li{
position:relative;
}
.menu a,.menu .menu-heading{
display:block;
color:inherit;
line-height:1.5em;
padding:5px 20px;
text-decoration:none;
white-space:nowrap;
}
.menu.menu-horizontal>.menu-heading{
display:inline-block;
margin:0;
zoom:1;
*display:inline;
vertical-align:middle;
}
.menu.menu-horizontal>ul{
display:inline-block;
zoom:1;
*display:inline;
vertical-align:middle;
}
.menu li a{
padding:5px 20px;
}
.menu-can-have-children>.menu-label:after{
content:'\25B8';
float:right;
font-family:'Lucida Grande','Lucida Sans Unicode','DejaVu Sans',sans-serif;
margin-right:-20px;
margin-top:-1px;
}
.menu-can-have-children>.menu-label{
padding-right:30px;
}
.menu-separator{
background-color:#dfdfdf;
display:block;
height:1px;
font-size:0;
margin:7px 2px;
overflow:hidden;
}
.menu-hidden{
display:none;
}
.menu-fixed{
position:fixed;
top:0;
left:0;
width:100%;
}
.menu-horizontal li{
display:inline-block;
zoom:1;
*display:inline;
vertical-align:middle;
}
.menu-horizontal li li{
display:block;
}
.menu-horizontal>.menu-children>.menu-can-have-children>.menu-label:after{
content:"\25BE";
}
.menu-horizontal>.menu-children>.menu-can-have-children>.menu-label{
padding-right:30px;
}
.menu.menu-open,.menu.menu-horizontal li .menu-children{
border: 1px solid #ECE9E9;
}
.menu.menu-horizontal, .menu.menu-horizontal .menu-heading{
border:0;
}
.menu a{
border:1px solid transparent;
border-left:none;
border-right:0;
}
.menu li a:hover{
background: #3498DB;
color: #ECF0F1;
}
.menu li.menu-disabled a:hover{
background:#fff;
color:#bfbfbf;
}
.menu .menu-disabled>a{
background-image:none;
border-color:transparent;
cursor:default;
}
.menu .menu-disabled>a,.menu .menu-can-have-children .menu-disabled>a:after{
color:#bfbfbf;
}
.menu .menu-heading{
text-transform:uppercase;
font-size:90%;
margin-top:.5em;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color: #ECF0F1;
}
.menu .menu-selected a{
font-weight:bold;
color:#000;
}
.menu.menu-open .menu-fixed{
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
border:0;
border-bottom:1px solid #b7b7b7;
}
@media(max-width:480px){
.menu-horizontal{
width:100%;
}
.menu-children li{
display:block;
border-bottom:1px solid block;
}
}
.paginator{
list-style:none;
margin:0;
padding:0;
}
.paginator li{
display:inline-block;
*display:inline;
*zoom:1;
margin:0 -0.35em 0 0;
}
.paginator .button{
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
padding:.8em 1.4em;
vertical-align:top;
height:1.1em;
}
.paginator .button:focus{
outline-style:none;
}
.paginator .prev,.paginator .next{
color:#c0c1c3;
text-shadow:0 -1px 0 rgba(0,0,0,0.45);
}
/* = Buttons
---------------------------------*/
.btn{
display:inline-block;
*display:inline;
zoom:1;
line-height:normal;
white-space:nowrap;
vertical-align:baseline;
text-align:center;
cursor:pointer;
-webkit-user-drag:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.btn::-moz-focus-inner{
padding:0;
border:0;
}
.btn{
font-size:100%;
*font-size:90%;
*overflow:visible;
padding:.5em 1.5em;
*color:#444;
border:0 rgba(0,0,0,0);
text-decoration:none;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-webkit-font-smoothing:antialiased;
-webkit-transition:.1s linear -webkit-box-shadow;
-moz-transition: .1s linear -moz-box-shadow;
-o-transition: .1s linear -o-box-shadow;
transition: .1s linear box-shadow;
}
.btn-hover,.btn:hover,.btn:focus{
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));
background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
background-image:-moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1));
background-image:-ms-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
background-image:-o-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
}
.btn:focus{outline:0;}
.btn-active,.btn:active{
-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;
-moz-box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;
box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;
}
.btn[disabled],.btn-disabled,.btn-disabled:hover,
.btn-disabled:focus,.btn-disabled:active{
border:0;
background-image:none;
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
filter:alpha(opacity=40);
-khtml-opacity:.4;
-moz-opacity:.4;
opacity:.4;
cursor:not-allowed;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
.btn-hidden{display:none;}
.btn-block{display: block;width: 100%;}
.btn::-moz-focus-inner{
padding:0;
border:0;
}
/* = Form
---------------------------------*/
.form{margin:0;border:1px solid rgba(0,0,0,0.0)}
.form fieldset{
border:1px solid silver;
margin:0 2px;
padding:.35em .625em .75em;
}
.form legend{
border:0;
padding:0;
white-space:normal;
*margin-left:-7px;
}
.form button,.form input,.form select,.form textarea{
font-size:100%;
margin:0;
vertical-align:baseline;
*vertical-align:middle;
}
.form button,.form input{line-height:normal;}
.form button,.form input[type=button],.form input[type=reset],.form input[type=submit]{
-webkit-appearance:button;
cursor:pointer;
*overflow:visible;
}
.form button[disabled],.form input[disabled]{
cursor:default;
}
.form input[type=checkbox],.form input[type=radio]{
box-sizing:border-box;
padding:0;
*height:13px;
*width:13px;
}
.form input[type=search]{
-webkit-appearance:textfield;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
}
.form input[type=search]::-webkit-search-cancel-button,.form input[type=search]::-webkit-search-decoration{
-webkit-appearance:none;
}
.form button::-moz-focus-inner,.form input::-moz-focus-inner{ border:0; padding:0;}
.form textarea{
overflow:auto;
vertical-align:top;
}
.form input[type=text],.form input[type=password],.form input[type=email],
.form input[type=url],.form input[type=date],.form input[type=month],
.form input[type=time],.form input[type=datetime],.form input[type=datetime-local],
.form input[type=week],.form input[type=number],.form input[type=search],
.form input[type=tel],.form input[type=color],.form select,.form textarea{
padding: 0.9em .6em;
display:inline-block;
border: 1px solid rgba(0,0,0,0.0);
font-size:.8em;
-webkit-transition:.3s linear border;
-moz-transition:.3s linear border;
-o-transition:.3s linear border;
transition:.3s linear border;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-font-smoothing:antialiased;
}
.form input[type=text]:focus,.form input[type=password]:focus,
.form input[type=email]:focus,.form input[type=url]:focus,
.form input[type=date]:focus,.form input[type=month]:focus,
.form input[type=time]:focus,.form input[type=datetime]:focus,
.form input[type=datetime-local]:focus,.form input[type=week]:focus,
.form input[type=number]:focus,.form input[type=search]:focus,
.form input[type=tel]:focus,.form input[type=color]:focus,
.form select:focus,.form textarea:focus{
outline:0;
outline:thin dotted \9;
border: 1px solid #129FEA;
}
.form input[type=file]:focus,
.form input[type=radio]:focus,
.form input[type=checkbox]:focus{
outline:none;
}
.form .checkbox,.form .radio{
margin:.5em 0;
display:block;
}
.form input[type=text][disabled],.form input[type=password][disabled],
.form input[type=email][disabled],.form input[type=url][disabled],
.form input[type=date][disabled],.form input[type=month][disabled],
.form input[type=time][disabled],.form input[type=datetime][disabled],
.form input[type=datetime-local][disabled],.form input[type=week][disabled],
.form input[type=number][disabled],.form input[type=search][disabled],
.form input[type=tel][disabled],.form input[type=color][disabled],
.form select[disabled],.form textarea[disabled]{
cursor:not-allowed;
}
.form input[readonly],.form select[readonly],
.form textarea[readonly],.form input[readonly]:focus,
.form select[readonly]:focus,.form textarea[readonly]:focus{}
.form input:focus:invalid,.form textarea:focus:invalid,.form select:focus:invalid{
color:#b94a48;
border:1px solid #ee5f5b;
}
.form input:focus:invalid:focus,.form textarea:focus:invalid:focus,.form select:focus:invalid:focus{
border-color:#e9322d;
}
.form input[type=file]:focus:invalid:focus,.form input[type=radio]:focus:invalid:focus,.form input[type=checkbox]:focus:invalid:focus{
outline-color:#e9322d;
}
.form select{}
.form select[multiple]{
height:auto;
}
.form label{
margin:.5em 0 .2em;
font-size:90%;
}
.form fieldset{
margin:0;
padding:.35em 0 .75em;
border:0;
}
.form legend{
display:block;
width:100%;
padding:.3em 0;
margin-bottom:.3em;
font-size:125%;
}
.form-stacked input[type=text],.form-stacked input[type=password],
.form-stacked input[type=email],.form-stacked input[type=url],
.form-stacked input[type=date],.form-stacked input[type=month],
.form-stacked input[type=time],.form-stacked input[type=datetime],
.form-stacked input[type=datetime-local],.form-stacked input[type=week],
.form-stacked input[type=number],.form-stacked input[type=search],
.form-stacked input[type=tel],.form-stacked input[type=color],
.form-stacked select,.form-stacked label,.form-stacked textarea{
display:block;
margin:.25em 0;
}
.form-aligned input,.form-aligned textarea,.form-aligned select,.form-aligned .help-inline,.form-message-inline{
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:middle;
}
.form-aligned .control-group{
margin-bottom:.5em;
}
.form-aligned .control-group label{
text-align:right;
display:inline-block;
vertical-align:middle;
width:10em;
margin:0 1em 0 0;
}
.form-aligned .controls{
margin:1.5em 0 0 10em;
}
.form input.input-rounded,.form .input-rounded{
-webkit-border-radius:2em;
-moz-border-radius:2em;
border-radius:2em;
padding:.5em 1em;
}
.form .group fieldset{
margin-bottom:10px;
}
.form .group input{
display:block;
padding:10px;
margin:0;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
position:relative;
top:-1px;
}
.form .group input:focus{
z-index:2;
}
.form .group input:first-child{
top:1px;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
border-radius:4px 4px 0 0;
}
.form .group input:last-child{
top:-2px;
-webkit-border-radius:0 0 4px 4px;
-moz-border-radius:0 0 4px 4px;
border-radius:0 0 4px 4px;
}
.form .group button{
margin:.35em 0;
}
.form .input-1{
width:100%;
}
.form .input-2-3{
width:66%;
}
.form .input-1-2{
width:50%;
}
.form .input-1-3{
width:33%;
}
.form .input-1-4{
width:25%;
}
.form .help-inline,.form-message-inline{
display:inline-block;
padding-left:.3em;
vertical-align:middle;
font-size:90%;
}
.form-message{
display:block;
font-size:90%;
}
/* = Tables
---------------------------------*/
.table{
border-collapse:collapse;
border-spacing:0;
empty-cells:show;
border: 1px solid #E7E7E7;
}
.table caption{
color:#000;
font:italic 85%/1 arial,sans-serif;
padding:1em 0;
text-align:center;
}
.table td,.table th{
border-left:1px solid #cbcbcb;
border-width:0 0 0 1px;
font-size:inherit;
margin:0;
overflow:visible;
padding:6px 12px;
}
.table td:first-child,.table th:first-child{border-left-width:0;}
.table thead{
text-align:left;
vertical-align:bottom;
}
.table td{background-color:transparent;}
.table-odd td{background-color:#ECF0F1;}
.table-striped tr:nth-child(2n-1) td{background-color:#ECF0F1;}
.table-bordered td{border-bottom:1px solid #ECF0F1;}
.table-bordered tbody>tr:last-child td,.table-horizontal tbody>tr:last-child td{border-bottom-width:0;}
.table-horizontal td,.table-horizontal th{border-width:0 0 1px;border-bottom:1px solid #ECF0F1;}
.table-horizontal tbody>tr:last-child td{border-bottom-width:0;}
/* = Grids
---------------------------------*/
@media only screen and (max-width :480px){
.form button[type=submit]{ margin:.7em 0 0; }
.form input[type=text],.form input[type=password],
.form input[type=email],.form input[type=url],
.form input[type=date],.form input[type=month],
.form input[type=time],.form input[type=datetime],
.form input[type=datetime-local],.form input[type=week],
.form input[type=number],.form input[type=search],
.form input[type=tel],.form input[type=color],.form label{
margin-bottom:.3em;
display:block;
}
.group input[type=text],.group input[type=password],
.group input[type=email],.group input[type=url],
.group input[type=date],.group input[type=month],
.group input[type=time],.group input[type=datetime],
.group input[type=datetime-local],.group input[type=week],
.group input[type=number],.group input[type=search],
.group input[type=tel],.group input[type=color]{
margin-bottom:0;
}
.form-aligned .control-group label{ margin-bottom:.3em; text-align:left; display:block; width:100%; }
.form-aligned .controls{ margin:1.5em 0 0; }
.form .help-inline,.form-message-inline,.form-message{ display:block; font-size:80%; padding:.2em 0 .8em; }
}
/*==================================
* GRIDS
===================================*/
.row {letter-spacing: -0.31em; *letter-spacing: normal; *word-spacing: -0.43em;text-rendering: optimizespeed;}
.opera-only :-o-prefocus,.row { word-spacing: -0.43em;}
.box { display: inline-block; zoom: 1; *display: inline; letter-spacing: normal;word-spacing: normal; vertical-align: top; text-rendering: auto;}
.box-1,.box-1-2,.box-1-3,.box-2-3,.box-1-4,
.box-3-4,.box-1-5,.box-2-5,.box-3-5,.box-4-5,
.box-1-6,.box-5-6,.box-1-7,.box-2-7,.box-3-7,
.box-4-7,.box-5-7,.box-6-7,.box-1-8,.box-3-8,
.box-5-8,.box-7-8,.box-1-9,.box-2-9,.box-4-9,
.box-5-9,.box-6-9,.box-7-9,.box-8-9,.box-1-10,
.box-3-10,.box-7-10,.box-9-10,.box-1-11,
.box-2-11,.box-3-11,.box-4-11,.box-5-11,
.box-6-11,.box-7-11,.box-8-11,.box-9-11,
.box-10-11,.box-1-12,.box-5-12,.box-7-12,
.box-9-12,.box-11-12 {
display: inline-block;
zoom: 1; *display: inline;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.box-1 {display:block;}
.box-1-2 { width: 50%;}
.offset-1-2 { margin-left: 50%;}
.box-1-3 { width: 33.33333%;}
.offset-1-3 { margin-left: 33.33333%;}
.box-2-3 { width: 66.66667%;}
.offset-2-3 { margin-left: 66.66667%;}
.box-1-4 {width: 25%;}
.offset-1-4 {margin-left: 25%;}
.box-3-4 { width: 75%;}
.offset-3-4 { margin-left: 75%;}
.box-1-5 { width: 20%;}
.offset-1-5 { margin-left: 20%;}
.box-2-5 { width: 40%;}
.offset-2-5 { margin-left: 40%;}
.box-3-5 { width: 60%;}
.offset-3-5 { margin-left: 60%;}
.box-4-5 { width: 80%;}
.offset-4-5 { margin-left: 80%;}
.box-1-6 { width: 16.66667%;}
.offset-1-6 { margin-left: 16.66667%;}
.box-5-6 { width: 83.33333%;}
.offset-5-6 { margin-left: 83.33333%;}
.box-1-7 { width: 14.28571%;}
.offset-1-7 { margin-left: 14.28571%;}
.box-2-7 { width: 28.57143%;}
.offset-2-7 { margin-left: 28.57143%;}
.box-3-7 {width: 42.85714%;}
.offset-3-7 {margin-left: 42.85714%;}
.box-4-7 { width: 57.14286%;}
.offset-4-7 {margin-left: 57.14286%;}
.box-5-7 {width: 71.42857%;}
.offset-5-7 {margin-left: 71.42857%;}
.box-6-7 {width: 85.71429%;}
.offset-6-7 {margin-left: 85.71429%;}
.box-1-8 {width: 12.5%;}
.offset-1-8 {margin-left: 12.5%;}
.box-3-8 {width: 37.5%;}
.offset-3-8 {margin-left: 37.5%;}
.box-5-8 {width: 62.5%;}
.offset-5-8 {margin-left: 62.5%;}
.box-7-8 {width: 87.5%;}
.offset-7-8 {margin-left: 87.5%;}
.box-1-9 {width: 11.11111%;}
.offset-1-9 {margin-left: 11.11111%;}
.box-2-9 {width: 22.22222%;}
.offset-2-9 {margin-left: 22.22222%;}
.box-4-9 {width: 44.44444%;}
.offset-4-9 {margin-left: 44.44444%;}
.box-5-9 {width: 55.55556%;}
.offset-5-9 {margin-left: 55.55556%;}
.box-6-9 { width: 66.66667%;}
.offset-6-9 { margin-left: 66.66667%;}
.box-7-9 { width: 77.77778%;}
.offset-7-9 {margin-left: 77.77778%;}
.box-8-9 {width: 88.88889%;}
.offset-8-9 { margin-left: 88.88889%;}
.box-1-10 { width: 10%;}
.offset-1-10 { margin-left: 10%;}
.box-3-10 { width: 30%;}
.offset-3-10 {margin-left: 30%;}
.box-7-10 { width: 70%;}
.offset-7-10 { margin-left: 70%;}
.box-9-10 { width: 90%;}
.offset-9-10 { margin-left: 90%;}
.box-1-11 {width: 9.09091%;}
.offset-1-11 {margin-left: 9.09091%;}
.box-2-11 { width: 18.18182%;}
.offset-2-11 {margin-left: 18.18182%;}
.box-3-11 { width: 27.27273%;}
.offset-3-11 { margin-left: 27.27273%;}
.box-4-11 {width: 36.36364%;}
.offset-4-11 {margin-left: 36.36364%;}
.box-5-11 {width: 45.45455%;}
.offset-5-11 {margin-left: 45.45455%;}
.box-6-11 {width: 54.54545%;}
.offset-6-11 {margin-left: 54.54545%;}
.box-7-11 {width: 63.63636%;}
.offset-7-11 {margin-left: 63.63636%;}
.box-8-11 {width: 72.72727%;}
.offset-8-11 {margin-left: 72.72727%;}
.box-9-11 {width: 81.81818%;}
.offset-9-11 {margin-left: 81.81818%;}
.box-10-11 {width: 90.90909%;}
.offset-10-11 {margin-left: 90.90909%;}
.box-1-12 {width: 8.33333%;}
.offset-1-12 {margin-left: 8.33333%;}
.box-5-12 {width: 41.66667%;}
.offset-5-12 { margin-left: 41.66667%;}
.box-7-12 { width: 58.33333%;}
.offset-7-12 {margin-left: 58.33333%;}
.box-9-12 {width: 75%;}
.offset-9-12 {margin-left: 75%;}
.box-11-12 {width: 91.66667%;}
.offset-11-12 { margin-left: 91.66667%;}
/* Responsive */
.row-r {letter-spacing: 0.2em; *letter-spacing: normal; word-spacing: -0.43em; }
.opera-only :-o-prefocus,.row-r {word-spacing: -0.43em;}
.row-r img {max-width: 100%;}
/* Desktop */
@media (min-width:980px) {
.visible-phone { display: none; }
.visible-tablet { display: none; }
.hidden-desktop { display: none; }
}
/* Mobile */
@media (max-width:480px) {
.row-r > [class ^= "box"] {width:100%;}
}
/* Tablet */
@media (max-width:767px) {
.row-r > [class ^= "box"] { width:100%;}
.hidden-phone { display: none; }
.visible-desktop { display: none; }
}
@media (min-width:768px) and (max-width:979px) {
.hidden-tablet { display: none; }
.visible-desktop { display: none; }
}
/*==================================
* PLUGINS
===================================*/
/* = To top function
-----------------------------------*/
.toTop{
position:fixed;
z-index:10000;
top:0;
left:0;
width: 55px;
height: 55px;
text-align:center;
line-height:40px;
display:none;
font-size:18px;
}
.toTop a{
display:block;
text-decoration:none;
font-size: 35px;
line-height: 65px;
font-weight:bold;
font-family:monospace;
}
/* = Menu
-----------------------------------*/
#menu{
background:#F8F8F8;
border-bottom:2px solid #2980b9;
width: 100%;
height: 55px;
overflow: hidden;
}
#menu .menu{
list-style: none outside none;
margin: 0;
overflow: hidden;
padding-left: 1em;
padding-right: 1em;
}
#menu .brand{
margin-top: 0.5em;
margin-left: 2em;
display: inline-block;
text-align: center;
width: 100%;
text-decoration: none;
font-family: sans-serif,sans;
font-weight: bold;
font-size: 1.5em;
}
#menu .menu_item{
display:inline-block;
position:relative;
overflow:hidden;
}
#menu .menu_link{
text-decoration:none;
color:#B3B3B3;
padding:0.9em 2em;
line-height: 1.4em;
margin-top:0.2em;
display: inline-block;
/*transition*/
-webkit-transition:background 0.8s ease-in;
-moz-transition:background 0.8s ease-in;
-o-transition:background 0.8s ease-in;
transition:background 0.8s ease-in;
overflow:hidden;
outline: none;
}
#menu .menu_link:hover:before{
border-bottom: 5px solid #2980B7;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: "";
/*transition*/
-webkit-transition:border 0.5s ease;
-moz-transition:border 0.5s ease;
-o-transition:border 0.5s ease;
transition:border 0.5s ease;
position: absolute;
top: 48px;
left:45%;
}
#menu .menu_link:hover{
background:#ecf0f1;
/*transition*/
-webkit-transition:background 0.8s ease-out;
-moz-transition:background 0.8s ease-out;
-o-transition:background 0.8s ease-out;
transition:background 0.8s ease-out;
}
#menu .active{
background:#ecf0f1;
color:#ECF0F1 !important;
/*transition*/
-webkit-transition:background 1s ease-in-out;
-moz-transition:background 1s ease-in-out;
-o-transition:background 1s ease-in-out;
transition:background 1s ease-in-out;
}
#menu .active:after{
content:attr(data-link);
position:absolute;
color: #3498DB;
/*animation*/
-webkit-animation:move 5s infinite ease-in-out;
-moz-animation:move 5s infinite ease-in-out;
-ms-animation:move 5s infinite ease-in-out;
-o-animation:move 5s infinite ease-in-out;
animation:move 5s infinite ease-in-out;
left:30%;
}
@keyframes move{from{left:100%} to{left:-50%}}
@-webkit-keyframes move{from{left:100%} to{left:-50%}}
@-moz-keyframes move{from{left:100%} to{left:-50%}}
@-ms-keyframes move{from{left:100%} to{left:-50%}}
@-o-keyframes move{from{left:100%} to{left:-50%}}
#menu .active:before{
border-bottom: 5px solid #2980B7;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: "";
/*transition*/
-webkit-transition:border 0.5s ease;
-moz-transition:border 0.5s ease;
-o-transition:border 0.5s ease;
transition:border 0.5s ease;
position: absolute;
top: 48px;
left:45%;
}
/* = Menu mobile icon inspired by http://codepen.io/loredonut
--------------------------------*/
#toggle_nav{
width:28px;
height:30px;
margin:10px;
cursor:pointer;
}
#toggle_nav div{
width:100%;
height:5px;
margin:4px auto;
/*transition*/
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-o-transition:all 0.3s;
transition:all 0.3s;
/*backface-visibility*/
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
#toggle_nav.on .one{
/*transform*/
-webkit-transform:rotate(45deg) translate(5px, 5px);
-moz-transform:rotate(45deg) translate(5px, 5px);
-ms-transform:rotate(45deg) translate(5px, 5px);
-o-transform:rotate(45deg) translate(5px, 5px);
transform:rotate(45deg) translate(5px, 5px);
}
#toggle_nav.on .two{ opacity:0;}
#toggle_nav.on .three{
/*transform*/
-webkit-transform:rotate(-45deg) translate(7px, -8px);
-moz-transform:rotate(-45deg) translate(7px, -8px);
-ms-transform:rotate(-45deg) translate(7px, -8px);
-o-transform:rotate(-45deg) translate(7px, -8px);
transform:rotate(-45deg) translate(7px, -8px);
}
#menu_mobile{display:none;}
#menu_mobile .menu {
margin-left: 0;
list-style: none;
list-style-image: none;
overflow: hidden;
padding: 0;
}
#menu_mobile .menu_link {
text-decoration: none;
color: #9E9E9E;
display: block;
padding: 0.5em;
background: #EEEEEE;
border: 0.1em solid #FFFFFF;
}
#menu_mobile .menu_link:hover {
color: blue;
}
#menu_mobile .menu_item {
margin: 0;
padding: 0;
display: block;
}
#menu_mobile .menu_link:hover {
background: #3498DB;
color: #F1F1F1;
}
#menu_mobile .menu_link .active {
color: blue;
background: blue;
}
/* Modal
------------------------*/
.overlay{
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
display: none;
z-index: 999999;
overflow: hidden;
}
.modal {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: -200%;
bottom: 0;
right: 0;
padding: 2% 1%;
-webkit-box-shadow: 0 9px 6px -10px #000;
box-shadow: 0 9px 6px -10px #000;
min-width: 20%;
max-width: 80%;
min-height: 20%;
max-height: 80%;
resize: both;
}
.modal iframe,.modal figure img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
}
.modal figcaption {
z-index: 99999;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 0.3em;
}
#close{
width:32px;
height:32px;
display:inline-block;
text-align:center;
line-height:28px;
text-decoration:none;
cursor:pointer;
margin-top:0;
margin-left:0;
position:absolute;
top:0;
right:0;
z-index: 99999;
font-size: 2em;
font-family: "lucida console",serif,monospace;
}
/* Accordion
------------------------*/
a[data-set="open"]:after {
position: absolute;
right: 0.5em;
margin: 0;
outline: none;
content: "▼";
padding: 3px;
width: 16px;
height: 16px;
border-radius: 100%;
text-align: center;
line-height: 1em;
font-weight: bold;
border: 2px solid #FFF;
font-family: "arial black";
top: 0.5em;
}
a[data-set="close"]:after {
position: absolute;
right: 0.5em;
top: 0.5em;
margin: 0;
outline: none;
content: "▲";
padding: 3px;
width: 16px;
height: 16px;
border-radius: 100%;
text-align: center;
line-height: 0.8em;
font-weight: bold;
border: 2px solid #FFF;
font-family: "arial black";
}
.accordion-open{
display:block!important;
}
.box-accordion{
width:100%;
display:block;
position:relative;
clear: both;
}
.box-accordion ul{
list-style:none;
margin:0;
padding:0;
}
.accordion{
display:none;
padding:0.5em;
}
.box-accordion ul li a{
text-decoration:none;
display:block;
padding:10px;
position: relative;
}
.box-accordion{
padding:4px;
}
/* Tabs
------------------------*/
.tabs{
width:100%;
display:block;
}
.tabs .tab{
display:none;
height:auto;
}
.tabs .tab-active{
display:inline-block;
}
.tabs .tab-open{
display:block;
padding:10px;
}
.tabs ul{
list-style-type:none;
margin:0;
padding:0;
}
.tabs ul li{
display:inline-block;
margin:0;
padding:0;
}
.tabs ul li a{
text-decoration:none;
padding:9px;
display:block;
border-radius: 4px 4px 0 0;
}
.tabs ul li.tab-active a{
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));
background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
background-image:-moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1));
background-image:-ms-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
background-image:-o-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
background-image: linear-gradient(rgba(250, 250, 250, 0.21),rgba(211, 211, 211, 0.27) 40%,rgba(241, 241, 241, 0.28));
}
/*==================================
* UTILITIES
===================================*/
/* = Backgrounds Inspired by http://flatuicolors.com/
-------------------------------------------*/
.b-turquoise{background:#1ABC9C;}
.b-green-sea{background:#16A085;}
.b-emerland{background:#2ECC71;}
.b-nephritis{background:#27AE60;}
.b-peter-river{background: #3498DB;}
.b-belize-hole{background:#2980B9;}
.b-amethyst{background:#9B59B6;}
.b-wisteria{background:#8E44AD;}
.b-wet-asphalt{background:#34495E;}
.b-midnight-blue{background:#2C3E50;}
.b-sun-flower{background:#F1C40F;}
.b-orange{background:#F39C12;}
.b-carrot{background:#E67E22;}
.b-pumpkin{background:#D35400;}
.b-alizarin{background:#E74C3C;}
.b-pomegranate{background:#C0392B;}
.b-clouds{background:#ECF0F1;}
.b-silver{background:#BDC3C7;}
.b-concrete{background:#95A5A6;}
.b-asbestos{background:#7F8C8D;}
/* = Colors Inspired by http://flatuicolors.com/
-------------------------------------------*/
.c-turquoise{color:#1ABC9C;}
.c-green-sea{color:#16A085;}
.c-emerland{color:#2ECC71;}
.c-nephritis{color:#27AE60;}
.c-peter-river{color:#3498DB;}
.c-belize-hole{color:#2980B9;}
.c-amethyst{color:#9B59B6;}
.c-wisteria{color:#8E44AD;}
.c-wet-asphalt{color:#34495E;}
.c-midnight-blue{color:#2C3E50;}
.c-sun-flower{color:#F1C40F;}
.c-orange{color:#F39C12;}
.c-carrot{color:#E67E22;}
.c-pumpkin{color:#D35400;}
.c-alizarin{color:#E74C3C;}
.c-pomegranate{color:#C0392B;}
.c-clouds{color:#ECF0F1;}
.c-silver{color:#BDC3C7;}
.c-concrete{color:#95A5A6;}
.c-asbestos{color:#7F8C8D;}
/* = Scrollbar chrome
-------------------------------------------*/
::-webkit-scrollbar { width: 12px;}
::-webkit-scrollbar-track {background: #F3F3F3;}
::-webkit-scrollbar-thumb {background: #3498DB;}
/* = Selection
-------------------------------------------*/
::selection {background: #3CA9E7;color:#ECF0F1;}
::-moz-selection {background: #e74c3c;color:#ECF0F1;}
/* = Tools
-----------------------------------*/
.pd{padding:1em;}
.cn{text-align: center;}
.op{
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
filter:alpha(opacity=80);
-khtml-opacity:0.8;
-moz-opacity:0.8;
opacity:0.8;
}
.sh {
-webkit-box-shadow: 0 2px 3px #999;
box-shadow: 0 2px 3px #999;
}
/*==================================
* THEME
===================================*/
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body{
margin:0 auto;
line-height:1.7em;
color:#666;
}
html,body,.btn,.subhead-title{font-family: 'Lato', sans-serif;font-weight: 300;}
h1,h2,h3,h4,.header-title{font-family: 'Lato', sans-serif;font-weight: 400;}
img{
width:100%;
display:block;
margin:0;
padding:0;
border:none;
outline:none;
}
h1,h2,h3,h4{ color:#666;}
pre{
position:relative;
border: 2px solid #3498DB;
white-space:pre;white-space:pre-wrap;word-wrap:break-word;
}
pre:after {
content: "Code";
background: #3498DB;
color: #ECF0F1;
position: absolute;
right: 0;
top: 0;
padding: 0.1em 0.2em;
}
.text-inner .btn{
position:absolute;
top:39%;
left:50%;
background:rgba(23, 138, 192, 0.59);
color:#FFF;
padding:7px 35px;
display:inline-block;
width:48%;
font-family:monospace;
line-height:2.2em;
vertical-align:middle;
margin:0;
font-size:26px;
text-decoration:none;
}
/* = Header
--------------------------------*/
#header{
position:relative;
margin-top:0;
margin-bottom:2em;
margin-left:auto;
margin-right:auto;
text-align:center;
overflow:hidden;
}
.header-inner{
min-height:30em;
padding-top:6em;
}
.head-title{
font-size:3em;
color:white;
text-shadow:0 2px 3px #777;
}
.subhead-title{
font-size:2em;
color:white;
text-shadow:0 2px 3px #777;
line-height: 1.3em;
}
/* = Slide
--------------------------*/
.biruSlide {
position: relative;
width: 100%;
overflow: auto;
}
.biruSlide ul,
.biruSlide ol {
margin: 0;
padding:0;
}
.biruSlide ul {
list-style: none;
width: 100%;
height: 100%;
}
.biruSlide ul li {
display: block;
float: left;
width: 100%;
height: auto;
padding: 0;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
.dots {
text-align: center;
list-style: none;
position: absolute;
top: 0;
right: 0.5em;
}
.dot {
display: inline-block;
margin-left: 0.5em;
background: rgba(0, 0, 0, 0.53);
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
border-radius: 100%;
z-index: 1000;
color: rgba(0, 0, 0, 0.53);
font-size: 0.5em;
cursor: pointer;
}
.dots .active{
background: rgba(255, 255, 255, 0.53);
color: rgba(255, 255, 255, 0);
}
.arrows {
margin: 0;
}
.arrows .prev {
left: 0;
top: 0;
position: absolute;
height: 100%;
}
.arrows .next {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.arrows .prev:after {
content: " ";
position: absolute;
top: 45%;
left: 0;
width: 0;
height: 0;
border-right: 15px solid rgba(0, 0, 0, 0.32);
border-left: 15px solid rgba(0, 0, 255, 0);
border-top: 15px solid rgba(0, 0, 255, 0);
border-bottom: 15px solid rgba(0, 0, 255, 0);
}
.arrows .next:after {
content: " ";
position: absolute;
top: 45%;
right: 0;
width: 0;
height: 0;
border-right: 15px solid rgba(0, 0, 255, 0);
border-left: 15px solid rgba(0, 0, 0, 0.32);
border-top: 15px solid rgba(0, 0, 255, 0);
border-bottom: 15px solid rgba(0, 0, 255, 0);
}
.arrows .next, .arrows .prev {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));
background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
background-image:-moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1));
background-image:-ms-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
background-image:-o-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
background-image: linear-gradient(rgba(250, 250, 250, 0.21),rgba(211, 211, 211, 0.27) 40%,rgba(241, 241, 241, 0.28));
filter: alpha(opacity=0);
opacity:0;
padding: 1.5em;
color:rgba(0, 0, 0, 0);
-webkit-transition:opacity 0.8s ease;
-moz-transition:opacity 0.8s ease;
-o-transition:opacity 0.8s ease;
-ms-transition:opacity 0.8s ease;
transition:opacity 0.8s ease;
}
.biruSlide:hover .arrows .next,
.biruSlide:hover .arrows .prev,
.arrows .prev:hover,
.arrows .next:hover{
cursor:pointer;
filter: alpha(opacity=1);
opacity:1;
-webkit-transition:opacity 0.8s ease;
-moz-transition:opacity 0.8s ease;
-o-transition:opacity 0.8s ease;
-ms-transition:opacity 0.8s ease;
transition:opacity 0.8s ease;
}
/* = Prefooter
--------------------------*/
.prefooter{}
.prefooter h3{
color:#F0F0F0;
}
/* = Footer
--------------------------*/
.footer{
text-align:center;
color:#FFF;
display:block;
margin:0;
padding:5px;
}
/*
*
* Biru framework 1.0v
*
* Copyright 2013 @nakome & @aryandhani
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Include:
* -> biruSlide.js 1.0v
* -> biruTabs.js 1.0v
* -> biruStiker.js 1.0v
* -> biruModal.js 1.0v
* -> biruAccordion.js 1.0v
*/
;(function($){
'use strict';
// define app
var app;
if (typeof app === 'undefined') app = {};
app.plug = {
// ini app
init: function() {
this.getTopFn();
this.getMenu();
this.getActions();
},
mobilecheck: function () {
var check = false;
(function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
},
// make active links
getActive_links: function(){
$('.menu_link').on(app.plug.mobilecheck() ? 'touchstart' : 'click',function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
},
// scroll to top
getTopFn: function(){
$(window).scroll(function(){
var scrl = $(window).scrollTop();
if (scrl > 350){$('.toTop').slideDown();}
else{$('.toTop').slideUp();}
});
$('[data-fn="top"]').on(app.plug.mobilecheck() ? 'touchstart' : 'click',function(){
$("html, body").animate({ scrollTop: 0 },500);
return false;
});
},
getMenu:function(){
// menu mobile
// clone nav into mobile
var nav = $('.menu').html();
$('#menu_mobile').html(nav);
// get active links
app.plug.getActive_links();
$('#toggle_nav').on(app.plug.mobilecheck() ? 'touchstart' : 'click',function() {
$(this).toggleClass('on');
$('#menu_mobile').slideToggle();
});
},
getActions: function(){
if($('#banner').length){
// Slide
$('#banner').biruSlide({
fluid: true,
dots: true,
speed: 800,
delay:5000,
arrows:true
});
}
if($('#slide').length){
// Slide
$('#slide').biruSlide({
fluid: true,
dots: true,
speed: 800,
delay:5000,
arrows:true
});
}
}
};
$(document).ready(function(){
app.plug.init();
});
})(jQuery);
/*
*
* biruSlide.js 1.0v
* Copyright 2013 @nakome & @aryandhani
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Defaults:
* -> speed: 500,
* -> delay: 3000,
* -> complete: false,
* -> dots: false,
* -> fluid: false,
* -> arrows: false
*/
;(function(e,t){"use-strict";function n(){var e=false;(function(t){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(t)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(t.substr(0,4)))e=true})(navigator.userAgent||navigator.vendor||window.opera);return e}if(!e)return t;var r=function(){this.el=t;this.items=t;this.sizes=[];this.max=[0,0];this.current=0;this.interval=t;this.options={speed:500,delay:3e3,complete:t,dots:t,fluid:t,arrows:t};var r=this;this.init=function(t,n){this.el=t;this.ul=t.children("ul");this.max=[t.outerWidth(),t.outerHeight()];this.items=this.ul.children("li").each(this.getWidth);this.options=e.extend(this.options,n);this.getSlide();return this};this.getWidth=function(t){var n=e(this),i=n.outerWidth(),s=n.outerHeight();r.sizes[t]=[i,s];if(i>r.max[0])r.max[0]=i;if(s>r.max[1])r.max[1]=s;if(e(".biruImg"))e(".biruImg").css({width:i,height:s})};this.getSlide=function(){this.el.css({overflow:"hidden",width:r.max[0],height:this.items.first().outerHeight()});this.ul.css({width:this.items.length*100+"%",position:"relative"});this.items.css("width",100/this.items.length+"%");if(this.options.delay!==t){this.start();this.el.hover(this.stop,this.start)}this.options.dots&&this.dots();if(this.options.fluid){var i=function(){r.el.css("width",Math.min(Math.round(r.el.outerWidth()/r.el.parent().outerWidth()*100),100)+"%")};i();e(window).resize(i)}if(this.options.arrows){this.el.append('<p class="arrows"><span class="prev"></span><span class="next"></span></p>').find(".arrows span").on(n()?"touchstart":"click",function(){e.isFunction(r[this.className])&&r[this.className]()})}};this.move=function(t,n){if(!this.items.eq(t).length)t=0;if(t<0)t=this.items.length-1;var i=this.items.eq(t);var s={height:i.outerHeight()};var o=n?5:this.options.speed;if(!this.ul.is(":animated")){r.el.find(".dot:eq("+t+")").addClass("active").siblings().removeClass("active");this.el.animate(s,o)&&this.ul.animate(e.extend({left:"-"+t+"00%"},s),o,function(i){r.current=t;e.isFunction(r.options.complete)&&!n&&r.options.complete(r.el)})}};this.start=function(){r.interval=setInterval(function(){r.move(r.current+1)},r.options.delay)};this.stop=function(){r.interval=clearInterval(r.interval);return r};this.next=function(){return r.stop().move(r.current+1)};this.prev=function(){return r.stop().move(r.current-1)};this.dots=function(){var t='<ol class="dots">';e.each(this.items,function(e){t+='<li class="dot'+(e<1?" active":"")+'">'+(e+1)+"</li>"});t+="</ol>";this.el.addClass("has-dots").append(t).find(".dot").on(n()?"touchstart":"click",function(){r.move(e(this).index())})}};e.fn.biruSlide=function(t){var n=this.length;return this.each(function(i){var s=e(this);var o=(new r).init(s,t);s.data("biruSlide"+(n>1?"-"+(i+1):""),o)})}})(window.jQuery,false);
/*
*
* biruTabs.js 1.0v
*
* Copyright 2013 @nakome & @aryandhani
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
(function(e,t){"use-strict";function n(){var e=false;(function(t){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(t)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(t.substr(0,4)))e=true})(navigator.userAgent||navigator.vendor||window.opera);return e}if(!e)return t;e('[data-fn="tabs"]').on(n()?"touchstart":"click",function(t){t.preventDefault();e(this).parent().addClass("tab-active").siblings().removeClass("tab-active");e("#"+e(this).data("open")).addClass("tab-open").siblings().removeClass("tab-open")})})(window.jQuery,false);
/*
*
* biruStiker.js 1.0v
*
* Copyright 2013 @nakome & @aryandhani
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
(function(e,t){"use-strict";if(!e)return t;e(window).scroll(function(){var t=e(window).scrollTop();if(t<=0){e('[data-fn="sticker"]').css({opacity:0}).animate({top:0},100,function(){e(this).css({position:"relative",opacity:1})})}else{e('[data-fn="sticker"]').css({position:"absolute"}).animate({top:t,width:"100%",zIndex:1e3},100)}})})(window.jQuery,false);
/*
*
* biruModal.js 1.0v
*
* Copyright 2013 @nakome & @aryandhani
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
(function(e,t){"use-strict";function n(){var e=false;(function(t){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(t)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(t.substr(0,4)))e=true})(navigator.userAgent||navigator.vendor||window.opera);return e}function r(e,t){var n='<buttom id="close">x</buttom>'+'<img class="tumb" src="'+e+'" alr="'+t+'"/>';return n}function i(e){var t='<buttom id="close" class="b-alizarin c-clouds">x</buttom>'+"<p>"+e+"</p>";return t}if(!e)return t;e('[data-fn="text"]').on(n()?"touchstart":"click",function(t){t.preventDefault();e(".overlay").css("display","block");e(".modal").animate({left:0},1e3);e(".modal").html(i(e(this).data("get")))});e('[data-fn="img"]').on(n()?"touchstart":"click",function(t){t.preventDefault();e(".overlay").css("display","block");e(".modal").animate({left:0},1e3);e(".modal").html(r(e(this).data("get"),e(this).attr("title")))});e(".overlay,#close").on(n()?"touchstart":"click",function(t){t.preventDefault();e(".modal").animate({left:"-200%"},1e3,function(){e(".overlay").css("display","none")})})})(window.jQuery,false);
/*
*
* biruAccordion.js 1.0v
*
* Copyright 2013 @nakome & @aryandhani
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
(function(e,t){"use-strict";function n(){var e=false;(function(t){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(t)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(t.substr(0,4)))e=true})(navigator.userAgent||navigator.vendor||window.opera);return e}if(!e)return t;e('[data-fn="accordion"]').attr("data-set","open");e('[data-fn="accordion"]').on(n()?"touchstart":"click",function(t){t.preventDefault();var n=e(this).data("open");if(e("#"+n).hasClass("accordion-open")){e("#"+n).removeClass("accordion-open");e(this).attr("data-set","open")}else{e("#"+n).addClass("accordion-open").parent().removeClass("accordion-open");e(this).attr("data-set","close")}})})(window.jQuery,false);
<div class="toTop b-peter-river">
<a href="#fakelink" class="top c-clouds" data-fn="top">^</a>
</div>
<nav id="menu" class="visible-desktop" data-fn="sticker">
<div class="row-r">
<div class="box-1-5">
<a href="#fl" class="brand c-peter-river">Biru</a>
</div>
<div class="box-2-3">
<ul class="menu">
<li class="menu_item ">
<a href="index.html" class="menu_link" data-link="Home">Home</a>
</li>
<li class="menu_item">
<a href="grids.html" class="menu_link" data-link="Grids">Grids</a>
</li>
<li class="menu_item">
<a href="components.html" class="menu_link active" data-link="Components">Components</a>
</li>
<li class="menu_item">
<a href="javascript.html" class="menu_link" data-link="Javascript">Javascript</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="toggle_nav" class="hidden-desktop">
<div class="one b-peter-river"></div>
<div class="two b-peter-river"></div>
<div class="three b-peter-river"></div>
</div>
<nav id="menu_mobile"></nav>
<header id="header" class="b-peter-river c-clouds">
<div class="row-r">
<div class="box-1">
<div id="banner" class="biruSlide">
<ul>
<li style="background-image: url('https://dl.dropboxusercontent.com/u/23834858/fotos/slide.jpg');">
<div class="header-inner">
<h1 class="head-title">Biru</h1>
<h2 class="subhead-title">Responsive framework</h2>
<a href="http://nakome.com/" class="btn b-midnight-blue c-clouds">Nakome</a>
<a href="http://aryandhani.com/" class="btn b-alizarin c-clouds" >Aryandhani</a>
</div>
</li>
<li style="background-image: url('https://dl.dropboxusercontent.com/u/23834858/fotos/slide3.jpg');">
<div class="header-inner">
<h1 class="head-title">Biru</h1>
<h2 class="subhead-title">Made for you</h2>
<a href="http://nakome.com/" class="btn b-midnight-blue c-clouds">Nakome</a>
<a href="http://aryandhani.com/" class="btn b-alizarin c-clouds" >Aryandhani</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
<section class="main">
<div class="row-r">
<div class="box-1">
<div class="pd">
<h2 class="c-peter-river b-clouds pd cn">All grids</h2>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1"><span class="grid b-peter-river c-clouds">.box-1</span></div>
</div>
<div class="row-r">
<div class="box-1-2"><span class="grid b-peter-river c-clouds">.box-1-2</span></div>
<div class="box-1-2"><span class="grid b-peter-river c-clouds">.box-1-2</span></div>
</div>
<div class="row-r">
<div class="box-1-3"><span class="grid b-peter-river c-clouds">.box-1-3</span></div>
<div class="box-2-3"><span class="grid b-peter-river c-clouds">.box-2-3</span></div>
</div>
<div class="row-r">
<div class="box-1-3"><span class="grid b-peter-river c-clouds">.box-1-3</span></div>
<div class="box-1-3"><span class="grid b-peter-river c-clouds">.box-1-3</span></div>
<div class="box-1-3"><span class="grid b-peter-river c-clouds">.box-1-3</span></div>
</div>
<div class="row-r">
<div class="box-1-4"><span class="grid b-peter-river c-clouds">.box-1-4</span></div>
<div class="box-1-4"><span class="grid b-peter-river c-clouds">.box-1-4</span></div>
<div class="box-1-4"><span class="grid b-peter-river c-clouds">.box-1-4</span></div>
<div class="box-1-4"><span class="grid b-peter-river c-clouds">.box-1-4</span></div>
</div>
<div class="row-r">
<div class="box-1-5"><span class="grid b-peter-river c-clouds">.box-1-5</span></div>
<div class="box-1-5"><span class="grid b-peter-river c-clouds">.box-1-5</span></div>
<div class="box-1-5"><span class="grid b-peter-river c-clouds">.box-1-5</span></div>
<div class="box-1-5"><span class="grid b-peter-river c-clouds">.box-1-5</span></div>
<div class="box-1-5"><span class="grid b-peter-river c-clouds">.box-1-5</span></div>
</div>
<div class="row-r">
<div class="box-1-6"><span class="grid b-peter-river c-clouds">.box-1-6</span></div>
<div class="box-1-6"><span class="grid b-peter-river c-clouds">.box-1-6</span></div>
<div class="box-1-6"><span class="grid b-peter-river c-clouds">.box-1-6</span></div>
<div class="box-1-6"><span class="grid b-peter-river c-clouds">.box-1-6</span></div>
<div class="box-1-6"><span class="grid b-peter-river c-clouds">.box-1-6</span></div>
<div class="box-1-6"><span class="grid b-peter-river c-clouds">.box-1-6</span></div>
</div>
<div class="row-r">
<div class="box-1-7"><span class="grid b-peter-river c-clouds">.box-1-7</span></div>
<div class="box-1-7"><span class="grid b-peter-river c-clouds">.box-1-7</span></div>
<div class="box-1-7"><span class="grid b-peter-river c-clouds">.box-1-7</span></div>
<div class="box-1-7"><span class="grid b-peter-river c-clouds">.box-1-7</span></div>
<div class="box-1-7"><span class="grid b-peter-river c-clouds">.box-1-7</span></div>
<div class="box-1-7"><span class="grid b-peter-river c-clouds">.box-1-7</span></div>
<div class="box-1-7"><span class="grid b-peter-river c-clouds">.box-1-7</span></div>
</div>
<div class="row-r">
<div class="box-1-8"><span class="grid b-peter-river c-clouds">.box-1-8</span></div>
<div class="box-1-8"><span class="grid b-peter-river c-clouds">.box-1-8</span></div>
<div class="box-1-8"><span class="grid b-peter-river c-clouds">.box-1-8</span></div>
<div class="box-1-8"><span class="grid b-peter-river c-clouds">.box-1-8</span></div>
<div class="box-1-8"><span class="grid b-peter-river c-clouds">.box-1-8</span></div>
<div class="box-1-8"><span class="grid b-peter-river c-clouds">.box-1-8</span></div>
<div class="box-1-8"><span class="grid b-peter-river c-clouds">.box-1-8</span></div>
<div class="box-1-8"><span class="grid b-peter-river c-clouds">.box-1-8</span></div>
</div>
<div class="row-r">
<div class="box-1-9"><span class="grid b-peter-river c-clouds">.box-1-9</span></div>
<div class="box-1-9"><span class="grid b-peter-river c-clouds">.box-1-9</span></div>
<div class="box-1-9"><span class="grid b-peter-river c-clouds">.box-1-9</span></div>
<div class="box-1-9"><span class="grid b-peter-river c-clouds">.box-1-9</span></div>
<div class="box-1-9"><span class="grid b-peter-river c-clouds">.box-1-9</span></div>
<div class="box-1-9"><span class="grid b-peter-river c-clouds">.box-1-9</span></div>
<div class="box-1-9"><span class="grid b-peter-river c-clouds">.box-1-9</span></div>
<div class="box-1-9"><span class="grid b-peter-river c-clouds">.box-1-9</span></div>
<div class="box-1-9"><span class="grid b-peter-river c-clouds">.box-1-9</span></div>
</div>
<div class="row-r">
<div class="box-1-10"><span class="grid b-peter-river c-clouds">.box-1-10</span></div>
<div class="box-1-10"><span class="grid b-peter-river c-clouds">.box-1-10</span></div>
<div class="box-1-10"><span class="grid b-peter-river c-clouds">.box-1-10</span></div>
<div class="box-1-10"><span class="grid b-peter-river c-clouds">.box-1-10</span></div>
<div class="box-1-10"><span class="grid b-peter-river c-clouds">.box-1-10</span></div>
<div class="box-1-10"><span class="grid b-peter-river c-clouds">.box-1-10</span></div>
<div class="box-1-10"><span class="grid b-peter-river c-clouds">.box-1-10</span></div>
<div class="box-1-10"><span class="grid b-peter-river c-clouds">.box-1-10</span></div>
<div class="box-1-10"><span class="grid b-peter-river c-clouds">.box-1-10</span></div>
<div class="box-1-10"><span class="grid b-peter-river c-clouds">.box-1-10</span></div>
</div>
<div class="row-r">
<div class="box-1-11"><span class="grid b-peter-river c-clouds">.box-1-11</span></div>
<div class="box-1-11"><span class="grid b-peter-river c-clouds">.box-1-11</span></div>
<div class="box-1-11"><span class="grid b-peter-river c-clouds">.box-1-11</span></div>
<div class="box-1-11"><span class="grid b-peter-river c-clouds">.box-1-11</span></div>
<div class="box-1-11"><span class="grid b-peter-river c-clouds">.box-1-11</span></div>
<div class="box-1-11"><span class="grid b-peter-river c-clouds">.box-1-11</span></div>
<div class="box-1-11"><span class="grid b-peter-river c-clouds">.box-1-11</span></div>
<div class="box-1-11"><span class="grid b-peter-river c-clouds">.box-1-11</span></div>
<div class="box-1-11"><span class="grid b-peter-river c-clouds">.box-1-11</span></div>
<div class="box-1-11"><span class="grid b-peter-river c-clouds">.box-1-11</span></div>
<div class="box-1-11"><span class="grid b-peter-river c-clouds">.box-1-11</span></div>
</div>
<div class="row-r">
<div class="box-1-12"><span class="grid b-peter-river c-clouds">.box-1-12</span></div>
<div class="box-1-12"><span class="grid b-peter-river c-clouds">.box-1-12</span></div>
<div class="box-1-12"><span class="grid b-peter-river c-clouds">.box-1-12</span></div>
<div class="box-1-12"><span class="grid b-peter-river c-clouds">.box-1-12</span></div>
<div class="box-1-12"><span class="grid b-peter-river c-clouds">.box-1-12</span></div>
<div class="box-1-12"><span class="grid b-peter-river c-clouds">.box-1-12</span></div>
<div class="box-1-12"><span class="grid b-peter-river c-clouds">.box-1-12</span></div>
<div class="box-1-12"><span class="grid b-peter-river c-clouds">.box-1-12</span></div>
<div class="box-1-12"><span class="grid b-peter-river c-clouds">.box-1-12</span></div>
<div class="box-1-12"><span class="grid b-peter-river c-clouds">.box-1-12</span></div>
<div class="box-1-12"><span class="grid b-peter-river c-clouds">.box-1-12</span></div>
<div class="box-1-12"><span class="grid b-peter-river c-clouds">.box-1-12</span></div>
</div>
<div class="row-r">
<div class="box-1">
<div class="pd">
<h3>Example grids with offsets</h3>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1-3"><span class="grid c-peter-river b-clouds">box-1-3</span></div>
<div class="box-2-3"><span class="grid c-peter-river b-clouds">box-1-3</span></div>
</div>
<div class="row-r">
<div class="box-1-2">
<pre class="grid c-midnight-blue b-clouds">
<div class="row-r">
<div class="box-1-3">
// content
</div>
<div class="box-2-3">
// content
</div>
</div></pre>
</div>
</div>
<div class="row-r">
<div class="box-1-3"><span class="grid b-peter-river c-clouds">box-1-3</span></div>
<div class="box-1-3"><span class="grid b-peter-river c-clouds">box-1-3</span></div>
<div class="box-1-3"><span class="grid b-peter-river c-clouds">box-1-3</span></div>
</div>
<div class="row-r">
<div class="box-1-2">
<pre class="grid c-midnight-blue b-clouds">
<div class="row-r">
<div class="box-1-3">
// content
</div>
<div class="box-1-3">
// content
</div>
<div class="box-1-3">
// content
</div>
</div></pre>
</div>
</div>
<div class="row-r">
<div class="box-2-3 offset-3-3"><span class="grid c-peter-river b-clouds">.box-2-3 .offset-3-3</span></div>
</div>
<div class="row-r">
<div class="box-1-2">
<pre class="grid c-midnight-blue b-clouds">
<div class="row-r">
<div class="box-2-3 offset-3-3">
// content
</div>
</div></pre>
</div>
</div>
<div class="row-r">
<div class="box-2-3"><span class="grid b-peter-river c-clouds">.box-2-3</span></div>
<div class="box-1-3"><span class="grid b-peter-river c-clouds">.box-1-3</span></div>
</div>
<div class="row-r">
<div class="box-1-2">
<pre class="grid c-midnight-blue b-clouds">
<div class="row-r">
<div class="box-2-3">
// content
</div>
<div class="box-1-3">
// content
</div>
</div></pre>
</div>
</div>
<div class="row-r">
<div class="box-1-4 offset-1-4"><span class="grid c-peter-river b-clouds">.box-1-4 .offset-1-4</span></div>
<div class="box-1-4 offset-1-4"><span class="grid c-peter-river b-clouds">.box-1-4 .offset-1-4</span></div>
</div>
<div class="row-r">
<div class="box-1-2">
<pre class="grid c-midnight-blue b-clouds">
<div class="row-r">
<div class="box-1-4 offset-1-4">
// content
</div>
<div class="box-1-4 offset-1-4">
// content
</div>
</div></pre>
</div>
</div>
<div class="row-r">
<div class="box-1-4"><span class="grid b-peter-river c-clouds">.box-1-4</span></div>
<div class="box-1-4"><span class="grid b-peter-river c-clouds">.box-1-4</span></div>
<div class="box-1-4"><span class="grid b-peter-river c-clouds">.box-1-4</span></div>
<div class="box-1-4"><span class="grid b-peter-river c-clouds">.box-1-4</span></div>
</div>
<div class="row-r">
<div class="box-1-2">
<pre class="grid c-midnight-blue b-clouds">
<div class="row-r">
<div class="box-1-4">
// content
</div>
<div class="box-1-4">
// content
</div>
<div class="box-1-4">
// content
</div>
<div class="box-1-4">
// content
</div>
</div></pre>
</div>
</div>
<div class="row-r">
<div class="box-1-3 offset-1-3"><span class="grid c-peter-river b-clouds">box-1-3 offset-1-3</span></div>
</div>
<div class="row-r">
<div class="box-1-2">
<pre class="grid c-midnight-blue b-clouds">
<div class="row-r">
<div class="box-1-3 offset-1-3">
// content
</div>
</div></pre>
</div>
</div>
<div class="row-r">
<div class="box-2-3 offset-1-3"><span class="grid b-peter-river c-clouds">.box-2-3 .offset-1-3</span></div>
</div>
<div class="row-r">
<div class="box-1-2">
<pre class="grid c-midnight-blue b-clouds">
<div class="row-r">
<div class="box-2-3 offset-1-3">
// content
</div>
</div></pre>
</div>
</div>
<div class="row-r">
<div class="box-1-2"><span class="grid c-peter-river b-clouds">.box-2-4</span></div>
<div class="box-1-4"><span class="grid c-peter-river b-clouds">.box-1-4</span></div>
<div class="box-1-4"><span class="grid c-peter-river b-clouds">.box-1-4</span></div>
</div>
<div class="row-r">
<div class="box-1-2">
<pre class="grid c-midnight-blue b-clouds">
<div class="row-r">
<div class="box-1-2">
// content
</div>
<div class="box-1-4">
// content
</div>
<div class="box-1-4">
// content
</div>
</div></pre>
</div>
</div>
<div class="row-r">
<div class="box-1">
<div class="pd">
<h2 class="c-peter-river b-clouds pd cn">Slide</h2>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1-2">
<div id="slide" class="biruSlide c-clouds">
<ul>
<li>
<img class="biruImg" src="https://dl.dropboxusercontent.com/u/23834858/fotos/slide3.jpg" alt="Demo img">
</li>
<li class="b-alizarin">
<div class="pd">
<h3 class="c-midnight-blue">This example text</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
</li>
</ul>
</div>
</div>
<div class="box-1-2">
<pre class="grid c-midnight-blue b-clouds">
<div id="slide" class="biruSlide c-clouds">
<ul>
<li>
<!-- Use biruImg to get slide width and height -->
<img class="biruImg" src="demo/img/slide.jpg" alt="placeholder+image">
</li>
<li class="b-alizarin">
<div class="pd">
<h3 class="c-midnight-blue">This example text</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
</li>
</ul>
</div>
<script>
if($('#slide').length){
// Init slide
$('#slide').biruSlide({
fluid: true,
dots: true,
speed: 800,
delay:5000,
arrows:true
});
}
</script>
</pre>
</div>
</div>
<div class="row-r">
<div class="box-1">
<div class="pd">
<h2 class="c-peter-river b-clouds pd cn">Accordion</h2>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1-3">
<div class="pd">
<div class="box-accordion">
<ul>
<li>
<a href="#fl" data-fn="accordion" data-open="accordion-one" class="b-peter-river c-clouds">Example one</a>
<div id="accordion-one" class="accordion b-clouds accordion-open">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
</li>
<li>
<a href="#fl" data-fn="accordion" data-open="accordion-two" class="b-peter-river c-clouds">Example two</a>
<div id="accordion-two" class="accordion b-clouds">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
</li>
<li>
<a href="#fl" data-fn="accordion" data-open="accordion-three" class="b-peter-river c-clouds">Example three</a>
<div id="accordion-three" class="accordion b-clouds">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
</li>
</ul>
</div>
<h3>Base accordion without colors</h3>
<div class="box-accordion">
<ul>
<li>
<a href="#fl" data-fn="accordion" data-open="accordion-four">Example one</a>
<div id="accordion-four" class="accordion accordion-open">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
</li>
<li>
<a href="#fl" data-fn="accordion" data-open="accordion-five">Example two</a>
<div id="accordion-five" class="accordion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
</li>
<li>
<a href="#fl" data-fn="accordion" data-open="accordion-six">Example three</a>
<div id="accordion-six" class="accordion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="box-2-3">
<div class="pd">
<pre class="c-midnight-blue b-clouds"><div class="box-accordion">
<ul>
<li>
<a href="#" data-fn="accordion" data-open="accordion-one" class="b-peter-river c-clouds">
Example one
</a>
<div id="accordion-one" class="accordion b-clouds accordion-open">
// content here
</div>
</li>
<li>
<a href="#" data-fn="accordion" data-open="accordion-two" class="b-peter-river c-clouds">
Example two
</a>
<div id="accordion-two" class="accordion b-clouds">
// content here
</div>
</li>
<li>
<a href="#" data-fn="accordion" data-open="accordion-three" class="b-peter-river c-clouds">
Example three
</a>
<div id="accordion-three" class="accordion b-clouds">
// content here
</div>
</li>
</ul>
</div></pre>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1">
<div class="pd">
<h2 class="c-peter-river b-clouds pd cn">Tabs</h2>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1-3">
<div class="pd">
<div class="tabs">
<ul>
<li class="tab-active"><a href="#fl" class="b-peter-river c-clouds" data-fn="tabs" data-open="tab-one">Open One</a></li>
<li><a href="#fl" class="b-peter-river c-clouds" data-fn="tabs" data-open="tab-two">Open Two</a></li>
<li><a href="#fl" class="b-peter-river c-clouds" data-fn="tabs" data-open="tab-three">Open Three</a></li>
</ul>
<div class="tab b-clouds tab-open" id="tab-one" >
Samplre one dolor sit amet, consectetur adipisicing elit. In nihil voluptas expedita dolores quas? Nemo libero quidem nesciunt corrupti dolorem. Omnis itaque nam porro aliquam cupiditate iste necessitatibus dicta perferendis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quia ab quo delectus possimus tempore debitis cumque excepturi a voluptatibus fugiat harum in consequuntur nihil recusandae laudantium perferendis nostrum voluptatem.
</div>
<div class="tab b-clouds" id="tab-two" >
Samplre two ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus vero quisquam voluptatem non modi a quia ipsam nemo saepe neque dolorum eveniet alias ipsa maxime blanditiis molestiae placeat. Doloremque vel!
</div>
<div class="tab b-clouds" id="tab-three" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur minus aperiam illo culpa possimus saepe corporis ex rerum natus cupiditate debitis incidunt ab vitae modi maiores at atque nisi.
</div>
</div>
<h3>Base tabs without colors</h3>
<div class="tabs">
<ul>
<li class="tab-active"><a href="#fl" data-fn="tabs" data-open="tab-four">Open One</a></li>
<li><a href="#fl" data-fn="tabs" data-open="tab-five">Open Two</a></li>
<li><a href="#fl" data-fn="tabs" data-open="tab-six">Open Three</a></li>
</ul>
<div class="tab tab-open" id="tab-four" >
Samplre one dolor sit amet, consectetur adipisicing elit. In nihil voluptas expedita dolores quas? Nemo libero quidem nesciunt corrupti dolorem. Omnis itaque nam porro aliquam cupiditate iste necessitatibus dicta perferendis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quia ab quo delectus possimus tempore debitis cumque excepturi a voluptatibus fugiat harum in consequuntur nihil recusandae laudantium perferendis nostrum voluptatem.
</div>
<div class="tab" id="tab-five" >
Samplre two ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus vero quisquam voluptatem non modi a quia ipsam nemo saepe neque dolorum eveniet alias ipsa maxime blanditiis molestiae placeat. Doloremque vel!
</div>
<div class="tab" id="tab-six" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur minus aperiam illo culpa possimus saepe corporis ex rerum natus cupiditate debitis incidunt ab vitae modi maiores at atque nisi.
</div>
</div>
</div>
</div>
<div class="box-2-3">
<div class="pd">
<pre class="c-midnight-blue b-clouds"><div class="tabs">
<ul>
<li class="tab-active">
<a href="#" class="b-peter-river c-clouds" data-fn="tabs" data-open="tab-one">
Open One
</a>
</li>
<li>
<a href="#" class="b-peter-river c-clouds" data-fn="tabs" data-open="tab-two">
Open Two
</a>
</li>
<li>
<a href="#" class="b-peter-river c-clouds" data-fn="tabs" data-open="tab-three">
Open Three
</a>
</li>
</ul>
<div class="tab b-clouds tab-open" id="tab-one" >
// content here
</div>
<div class="tab b-clouds" id="tab-two" >
// content here
</div>
<div class="tab b-clouds" id="tab-three" >
// content here
</div>
</div></pre>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1">
<div class="pd">
<h2 class="c-peter-river b-clouds pd cn">Modal</h2>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1-3">
<div class="pd">
<h3>Modal</h3>
<a class="btn b-peter-river c-clouds" href="#fl" title=" Example link" data-fn="text" data-get="<h2 class='c-clouds cn'>This is a simple modal in h2<h2>">Simple</a>
<a class="btn b-peter-river c-clouds" href="#fl" title=" Example link" data-fn="text" data-get="<iframe width='560' height='315' src='http://www.youtube.com/embed/Pq8E0GpU6BA?list=UUusD6cPVuc9F9m3L50jCNiA' frameborder='0' allowfullscreen></iframe>">Youtube</a>
<a class="btn b-peter-river c-clouds" href="#fl" title=" Example link" data-fn="text" data-get="<h2 class='c-clouds cn'>This is a another modal with paragraph</h2><p class='c-clouds'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>">Header and text</a>
<a class="btn b-peter-river c-clouds" href="#fl" title=" Example link" data-fn="text" data-get="<figure><img src='https://dl.dropboxusercontent.com/u/23834858/fotos/base.gif' alt='Sample img'/></figure>">This is a img</a>
<a class="btn b-peter-river c-clouds" href="#fl" title=" Example link" data-fn="text" data-get="<figure><img src='https://dl.dropboxusercontent.com/u/23834858/fotos/base.gif' alt='Sample img'/></figure><figcaption class='b-alizarin c-clouds'>This is image caption</figure>">Img with caption</a>
</div>
</div>
<div class="box-2-3">
<div class="pd">
<h3>Html code</h3>
<pre class="c-midnight-blue b-clouds">
// link
<a class="btn" href="#" title=" Example link" data-fn="text" data-get="Html text here with ' ' "h2>
Download
</a>
// Modal with custom colors
<div class="overlay b-midnight-blue">
<div class="modal b-wet-asphalt c-clouds"></div>
</div></pre>
</div>
</div>
<div class="row-r">
<div class="box-1">
<div class="pd">
<h2 class="c-peter-river b-clouds pd cn">Buttons</h2>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1-3">
<div class="pd">
<h3>Colors</h3>
<button class="btn c-clouds b-turquoise">turquoise</button>
<button class="btn c-clouds b-green-sea">green-sea</button>
<button class="btn c-clouds b-emerland">emerland</button>
<button class="btn c-clouds b-nephritis">nephritis</button>
<button class="btn c-clouds b-peter-river">peter-river</button>
<button class="btn c-clouds b-belize-hole">belize-hole</button>
<button class="btn c-clouds b-amethyst">amethyst</button>
<button class="btn c-clouds b-wisteria">wisteria</button>
<button class="btn c-clouds b-wet-asphalt">wet-asphalt</button>
<button class="btn c-clouds b-midnight-blue">midnight-blue</button>
<button class="btn c-clouds b-sun-flower">sun-flower</button>
<button class="btn c-clouds b-orange">orange</button>
<button class="btn c-clouds b-carrot">carrot</button>
<button class="btn c-clouds b-pumpkin">pumpkin</button>
<button class="btn c-clouds b-alizarin">alizarin</button>
<button class="btn c-clouds b-pomegranate">pomegranate</button>
<button class="btn c-midnight-blue b-clouds">clouds</button>
<button class="btn c-clouds b-silver">silver</button>
<button class="btn c-clouds b-concrete">concrete</button>
<button class="btn c-clouds b-asbestos">asbestos</button>
</div>
</div>
<div class="box-2-3">
<div class="pd">
<h3>Html code</h3>
<pre class="c-midnight-blue b-clouds">
<button class="btn c-clouds b-turquoise">turquoise</button>
<button class="btn c-clouds b-green-sea">green-sea</button>
<button class="btn c-clouds b-emerland">emerland</button>
<button class="btn c-clouds b-nephritis">nephritis</button>
<button class="btn c-clouds b-peter-river">peter-river</button>
<button class="btn c-clouds b-belize-hole">belize-hole</button>
<button class="btn c-clouds b-amethyst">amethyst</button>
<button class="btn c-clouds b-wisteria">wisteria</button>
<button class="btn c-clouds b-wet-asphalt">wet-asphalt</button>
<button class="btn c-clouds b-midnight-blue">midnight-blue</button>
<button class="btn c-clouds b-sun-flower">sun-flower</button>
<button class="btn c-clouds b-orange">orange</button>
<button class="btn c-clouds b-carrot">carrot</button>
<button class="btn c-clouds b-pumpkin">pumpkin</button>
<button class="btn c-clouds b-alizarin">alizarin</button>
<button class="btn c-clouds b-pomegranate">pomegranate</button>
<button class="btn c-midnight-blue b-clouds">clouds</button>
<button class="btn c-clouds b-silver">silver</button></pre>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1-3">
<div class="pd">
<h3>buttons</h3>
<button class="btn">Simple button</button>
<button class="btn btn-disabled">Disabled button</button>
<button class="btn btn-active">Active button</button>
<button class="btn b-peter-river c-clouds">Color button</button>
<button class="btn btn-block">Block button</button>
</div>
</div>
<div class="box-2-3">
<div class="pd">
<h3>Html code</h3>
<pre class="c-midnight-blue b-clouds">
<button class="btn">Simple button</button>
<button class="btn btn-disabled">Disabled button</button>
<button class="btn btn-active">Active button</button>
<button class="btn b-peter-river c-clouds">Color button</button>
<button class="btn btn-block">Block button</button></pre>
</div>
</div>
<div class="row-r">
<div class="box-1">
<div class="pd">
<h2 class="c-peter-river b-clouds pd cn">Forms</h2>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1-2">
<div class="pd">
<h3>Inline forms</h3>
<form class="form">
<fieldset>
<legend>Login</legend>
<input type="email" class="b-clouds c-peter-river" placeholder="Email">
<input type="password" class="b-clouds c-peter-river" placeholder="Password">
<label for="remember">
<input id="remember" type="checkbox"> Remember me
</label>
<button type="submit" class="btn b-peter-river c-clouds">Sign in</button>
</fieldset>
</form>
</div>
</div>
<div class="box-1-2">
<div class="pd">
<h3>Html code</h3>
<pre class="c-midnight-blue b-clouds">
<form class="form c-clouds b-peter-river">
<fieldset>
<legend>A compact inline form</legend>
<input type="email" class="b-clouds c-peter-river" placeholder="Email">
<input type="password" class="b-clouds c-peter-river" placeholder="Password">
<label for="remember">
<input id="remember" type="checkbox"> Remember me </label>
<button type="submit" class="btn b-peter-river c-clouds">Sign in</button>
</fieldset>
</form></pre>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1-2">
<div class="pd">
<h3>Aligned Form</h3>
<form class="form form-aligned">
<fieldset>
<div class="control-group">
<label for="name">Username</label>
<input id="name" type="text" class="c-peter-river b-clouds" placeholder="Username">
</div>
<div class="control-group">
<label for="password">Password</label>
<input id="password" type="password" class="c-peter-river b-clouds" placeholder="Password">
</div>
<div class="control-group">
<label for="email">Email Address</label>
<input id="email" type="email" class="c-peter-river b-clouds input-1-3" placeholder="Email Address">
</div>
<div class="control-group">
<label for="foo">Menssage</label>
<textarea id="foo" class="c-peter-river b-clouds input-1-2" placeholder="Enter something here..."></textarea>
</div>
<div class="controls">
<label for="cb" class="checkbox">
<input id="cb" type="checkbox"> I've read the terms and conditions
</label>
<button type="submit" class="btn b-peter-river c-clouds">Submit</button>
</div>
</fieldset>
</form>
</div>
</div>
<div class="box-1-2">
<div class="pd">
<h3>Html code</h3>
<pre class="c-midnight-blue b-clouds">
<form class="form form-aligned">
<fieldset>
<div class="control-group">
<label for="name">Username</label>
<input id="name" type="text" class="c-peter-river b-clouds" placeholder="Username">
</div>
<div class="control-group">
<label for="password">Password</label>
<input id="password" type="password" class="c-peter-river b-clouds" placeholder="Password">
</div>
<div class="control-group">
<label for="email">Email Address</label>
<input id="email" type="email" class="c-peter-river b-clouds input-1-3" placeholder="Email Address">
</div>
<div class="control-group">
<label for="foo">Textarea</label>
<textarea id="foo" type="text" class="c-peter-river b-clouds input-1-2" placeholder="Enter something here..."></textarea>
</div>
<div class="controls">
<label for="cb" class="checkbox">
<input id="cb" type="checkbox">
I've read the terms and conditions
</label>
<button type="submit" class="btn b-peter-river c-clouds">Submit</button>
</div>
</fieldset>
</form></pre>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1">
<div class="pd">
<h2 class="c-peter-river b-clouds pd cn">Menus</h2>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1-2">
<div class="pd">
<h3>Vertical Menu</h3>
<div class="menu menu-open b-midnight-blue c-clouds">
<ul>
<li class="menu-heading">Biru world</li>
<li class="menu-active"><a href="#">Home</a></li>
<li><a href="#">Components</a></li>
<li><a href="#">Grids</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="box-1-2">
<div class="pd">
<h3>Html code</h3>
<pre class="c-midnight-blue b-clouds">
<div class="menu menu-open b-midnight-blue c-clouds">
<ul>
<li class="menu-heading">Biru world</li>
<li class="menu-active"><a href="#">Home</a></li>
<li><a href="#">Components</a></li>
<li><a href="#">Grids</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div></pre>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1-2">
<div class="pd">
<h3>Horizontal Menu</h3>
<div class="menu menu-open menu-horizontal b-peter-river c-clouds">
<a href="#" class="menu-heading">Biru world</a>
<ul>
<li><a href="#">Home</a></li>
<li class="menu-active"><a href="#">Components</a></li>
<li><a href="#">Grids</a></li>
<li class="menu-disabled"><a href="#">Disabled</a></li>
</ul>
</div>
</div>
</div>
<div class="box-1-2">
<div class="pd">
<h3>Html code</h3>
<pre class="c-midnight-blue b-clouds">
<div class="menu menu-open menu-horizontal">
<a href="#" class="menu-heading">Biru world</a>
<ul>
<li><a href="#">Home</a></li>
<li class="menu-active"><a href="#">Components</a></li>
<li><a href="#">Grids</a></li>
<li class="menu-disabled"><a href="#">Disabled</a></li>
</ul>
</div></pre>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1">
<div class="pd">
<h2 class="c-peter-river b-clouds pd cn">Tables</h2>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1-3">
<div class="pd">
<h3>Basic</h3>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Css</th>
<th>Html</th>
<th>Javascript</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Android</td>
<td>IOS</td>
<td>Chrome</td>
</tr>
<tr>
<td>2</td>
<td>Android</td>
<td>IOS</td>
<td>Chrome</td>
</tr>
<tr>
<td>3</td>
<td>Android</td>
<td>IOS</td>
<td>Chrome</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box-2-3">
<div class="pd">
<h3>Html code</h3>
<pre class="c-midnight-blue b-clouds">
<table class="table">
<thead>
<tr>
<th>#</th><th>Css</th><th>Html</th><th>Javascript</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Android</td><td>IOS</td><td>Chrome</td>
</tr>
<tr>
<td>1</td><td>Android</td><td>IOS</td><td>Chrome</td>
</tr>
<tr>
<td>1</td><td>Android</td><td>IOS</td><td>Chrome</td>
</tr>
</tbody>
</table></pre>
</div>
</div>
</div>
<div class="row-r">
<div class="box-1-3">
<div class="pd">
<h3>Colors</h3>
<table class="table c-peter-river b-clouds sh">
<thead class="b-peter-river c-clouds">
<tr>
<th>#</th>
<th>Css</th>
<th>Html</th>
<th>Javascript</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Android</td>
<td>IOS</td>
<td>Chrome</td>
</tr>
<tr>
<td>2</td>
<td>Android</td>
<td>IOS</td>
<td>Chrome</td>
</tr>
<tr>
<td>3</td>
<td>Android</td>
<td>IOS</td>
<td>Chrome</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box-2-3">
<div class="pd">
<h3>Html code</h3>
<pre class="c-midnight-blue b-clouds">
<table class="table c-peter-river b-clouds sh">
<thead class="b-peter-river c-clouds">
<tr>
<th>#</th><th>Css</th><th>Html</th><th>Javascript</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Android</td><td>IOS</td><td>Chrome</td>
</tr>
<tr>
<td>1</td><td>Android</td><td>IOS</td><td>Chrome</td>
</tr>
<tr>
<td>1</td><td>Android</td><td>IOS</td><td>Chrome</td>
</tr>
</tbody>
</table></pre>
</div>
</div>
</div>
</section><!-- /main -->
<div class="footer b-wet-asphalt c-clouds "><p>Copyright © 2013 ::: Made with ♥</p></div>
<div class="overlay b-pomegranate"><div class="modal b-alizarin c-clouds"></div></div>