Gastropool tabs

dabblet.css

/**
 * Gastropool tabs
 */
/* Type & image presets */

html,
 body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
 pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small, 
strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0 none;
    margin: 0;
    padding: 0;
}

img, object, embed {
margin-bottom: 20px;
}

body, label {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 24px;    /* Changing this will break the baseline grid. */
-webkit-text-size-adjust: none;    /* Stops the iPhone scalling type up */
color: #000;
}

a {
text-decoration: none;
color: #005698;
font-weight: bold;
border-bottom: 1px solid #adadad;
}

a:hover {
color: #000;
border-bottom: none;
}

a img {
display: block;    /* Stops image links getting text link styles */
}

img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom: 20px;
}

p, ul, ol, blockquote {
margin-bottom: 9px;  /* Changing this will break the baseline grid. */
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 24px;    /* Changing this will break the baseline grid. */
}

li {
margin-bottom: 6px;
}

blockquote {
border-left: 1px solid #c1c1c1;
color: #747474;
padding-left: 15px;
margin-left: -15px;
}

h1 {
font-size: 32px;
line-height: 36px;    /* Changing this will break the baseline grid. */
margin-bottom: 24px;  /* Changing this will break the baseline grid. */
font-family: Times, serif;
font-weight: lighter;
}

h2 {
font-size: 20px;
margin-bottom: 24px;  /* Changing this will break the baseline grid. */
font-family: Times, serif;
font-weight: lighter;
color: #A66104;
}

h3 {
font-size: 16px;
margin-bottom: 24px;  /* Changing this will break the baseline grid. */
font-family: Times, serif;
font-weight: lighter;
color: #A66104;
}

table.tableGen {
  width:100%;
  border-collapse: collapse;
}

table.tableGen td{
  padding: 2px;
}

table.tableGen .number {
  text-align:right;
}

table.tableGen .null{
  visibility:hidden;
}

table.tableGen .number.negative{
  color:red;
}


table.tableGen .Date{
  text-align:center;
}

table.tableGen th{
  background-color: #dedbde;
}
table.tableGen, th.tableGen, td.tableGen,.tableGen thead,.tableGen tbody{
  border: 1px solid #a5a6a5;
}

.Filterung img,
.Filterung table,
.Filterung tr,
.Filterung th,
.Filterung td{
  margin:0;
  width:auto;
  padding-top:0;
  padding-bottom:0;
}

table.Filterung{
  margin-bottom: 10px;
  border:0 !important;
  width:100%;
}

.Filterung .CMB {
  width:100px;
}

.dxeErrorCell{
  display:none;
  visibility:hidden;
}



.Filterung {
  line-height:14px;
}

.dxeButtonEditButton {
  padding-left:1px !important;
  padding-right:0 !important;
}

.dxeButtonEditButton img{
  padding:0 !Important;
  margin:0 !Important;
}

.dxEditors_edtDropDown{
  width:10px !Important;
}


p span {
  text-decoration:underline;
}
























/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */ 
 
html {
	min-height: 100%;
}

body {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow) no-repeat;
	min-height:100%;
}

.tabcontainer{
	width: 650px;
	margin-left:auto;
	margin-right:auto;
	margin-top: 100px;
	background-color:white;
	box-shadow: 0px 0px 1px 5px rgba(0, 0, 0, 0.2);
}

.tablist{
  list-style-type: none;
  padding: 3px 10px 3px 10px;
  margin-bottom:0
}

.tablist li{
  display: inline;
  border: 1px solid #d3d3d3;
  background-color: #f9f9f9;
  text-align: center;
  margin-right:2px;
  padding: 6px 14px 6px 14px;
}

.tablist li.selected {
  border: 3px solid #d3d3d3;
  border-bottom: 3px solid #f9f9f9;
  padding: 4px 12px 6px 12px;
}

.tablist li.selected  a {
  color: #A66104;
}

.tablist li a {
  color: #707070;
  font-family: Times, serif;
  font-weight: lighter;
  text-decoration:none;
  border-bottom:none;
}

.tabcontent{
  display:block;
  border: 3px solid #d3d3d3;
  background-color: #f9f9f9;
  margin-top:-1px;
  vertical-align: top;
  padding: 10px; 
  padding-left:20px;
  padding-right:20px;
}

dabblet.html

<div class="Lieferantenverzeichniss tabcontainer">
  <ul class="Warengruppenliste tablist">    
    <li class="tab Warengruppe selected">
      <a href="/de/lieferantenverzeichnis/lebensmittel.aspx">Lebensmittel</a>
    </li>
    <li class="tab Warengruppe">
      <a href="/de/lieferantenverzeichnis/verbrauchsgueter-und-anlagegueter.aspx">Verbrauchsgüter und Anlagegüter</a>
    </li>
    <li class="tab Warengruppe">
      <a href="/de/lieferantenverzeichnis/dienstleistungen.aspx">Dienstleistungen</a>
    </li>
    <li class="tab Warengruppe">
      <a href="/de/lieferantenverzeichnis/energie.aspx">Energie</a>
    </li>
    <li class="tab Warengruppe">
      <a href="/de/lieferantenverzeichnis/neue-lieferanten.aspx">Neue Lieferanten</a>
    </li>
  </ul>
  <div class="tabcontent">
    <p><br /></p><br /><p><br /></p>
  </div>
</div>

settings.json

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