tessalt

%inline-block {
  display: inline-block;
  vertical-align: top;  
  *display: inline;
}

tessalt

%clearfix {
  &:before, &:after {
    content: " ";
    display: table;
  }  
  &:after {
    clear: both;
  }
}

tessalt

%pseudo-content-before {
  position: relative;
  &:before {
    content: " ";
    position: absolute;
    display: block;
   }
}

%pseudo-content-after {

tessalt

<input type="text" id="textinput" />
<label for="textinput">Text</label>

tessalt

.comment-body {
    position: relative;
    &:before {
      position: absolute;
      left: -11px;
      top: 10px;
      display: block;
      content: " ";
      width: 0; 
      height: 0; 

tessalt

<ul class="tabs">
  <li><a href="#tab1" class="active">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
</ul> 
<div class="tab active" id="tab1">
  <!-- tab 1 content -->
</div>
<div class="tab" id="tab2">
  <!-- tab 1 content -->
</div>

tessalt

<nav class="multi-level-nav">
  <ul>
    <li>
      <a href="#">Pants</a>
      <ul>
        <li><a href="#">Mens</a></li>
        <li><a href="#">Womens</a></li>
      </ul>
    </li>
    <li>

tessalt

<div class="dropdown">
  <a href="#" class="dropdown-trigger">Trigger Dropdown</a>
  <ul class="dropdown-content">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
  </ul>
</div>

tessalt

.accordion-toggle {
  display: block;
}

tessalt

$(".collapse-tree a").click(function() {
  var listItem = $(this).parent("li");
  listItem.children("ul").slideToggle();
  $(this).toggleClass("open");
  return false;
});