Tabs

dabblet.css

/**
 * Tabs
 */

.clearfix:before,
 .clearfix:after {
     content: " "; /* 1 */
     display: table; /* 2 */
 }
 
 .clearfix:after {
     clear: both;
 }
 
 /*
  * For IE 6/7 only
  * Include this rule to trigger hasLayout and contain floats.
  */
 
 .clearfix {
     *zoom: 1;
 }



* {
border: 0;border-collapse: collapse;empty-cells: show;margin: 0;padding: 0;list-style-image: none;
list-style-position: outside;list-style-type: none;font-size: 11px;font-family: Arial, Helvetica, sans-serif;text-decoration: none;
}
#tabs {
border-bottom: 1px solid #999;
}
#tabs li {
border: 1px solid #999;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
  background-color: #EFEFEF;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFFFFF)); /* Chrome, Safari 4+ */
  background-image: -webkit-linear-gradient(top, #EFEFEF, #FFFFFF); /* Chrome 10+, iOS 5+, Safari 5.1+ */
  background-image: -moz-linear-gradient(top, #EFEFEF, #FFFFFF); /* Firefox 3.6-15 */
  background-image: -o-linear-gradient(top, #EFEFEF, #FFFFFF); /* Opera 11.10-12.00 */
  background-image: linear-gradient(to bottom, #EFEFEF, #FFFFFF); /* Firefox 16+, IE 10+, Opera 12.50+ */
    -webkit-box-shadow: 0px -2px 2px 1px #e3e3e3; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          box-shadow: 0px -2px 2px 1px #e3e3e3; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
          float:left;
          margin: 0 3px -1px 0;
}
#tabs li:hover {
border-color: #000;
border-bottom-color: #999;
	background: #FFF;
}
#tabs li:hover a {
color: #000
}
#tabs ul{
margin: 2px 6px;
}
#tabs li.active {
border-bottom: 1px solid #FFF;
}
#tabs li.active a {
color: #333;
}
#tabs li a {
color: #666;
padding:5px 8px 5px;
display: inline-block;
}

dabblet.html

<div id="tabs" class="clearfix">
<ul>
<li class="active">
<a href="/invoices">
<span>Faktury</span>
</a>
</li>
<li>
<a href="/estimates">
<span>Oferty</span>
</a>
</li>
<li>
<a href="/payment_reminders">
<span>Wezwania do zapłaty</span>
</a>
</li>
<li>
<a href="/credit_notes">
<span>Noty uznaniowe</span>
</a>
</li>
<li>
<a href="/orders">
<span>Zamówienia</span>
</a>
</li>
<li>
<a href="/recurrings">
<span>Faktury cykliczne</span>
</a>
</li>
</ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}