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;
}


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;
}

li {
margin-bottom: 6px;
}

/* 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;
  overflow-x:visible;
  white-space: nowrap;
  margin-left: -5px;
}

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

.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"}