<a href="#" class="normaltip" title="Normal Tooltip Text">This is a Normal Tooltip</a>

<a href="#" class="fixedtip" title="This is a Fixed Tooltip  <img src='images/image.jpg' alt='' title='Image Title'  />">Fixed Tooltip</a>

<a href="#" class="clicktip" >On Click Tooltip</a>

$('.clicktip').aToolTip({  
				clickIt: true,  
				tipContent: 'Click Me Tooltip with content from parameter'  
			});  
			

<dl class="slideDown">
	<dt>SlideDown trigger</dt>
	<dd>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
	</dd>
	</dl>
	

<dl class="slideDown absolute">
	<dt>SlideDown trigger</dt>
	<dd>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
	</dd>
	</dl>
	

<div id="twitter" class="twitter"> </div>

You can add a Twitter-Reader and configure it in the script.js starting on line 223:

1. Insert a div with twitter class and twitter id to a specific location on the page:
   <div id="twitter" class="twitter"> </div>
2. Next you will need to configure twitter-reader to use your twitter-account. To accomplish this you will have to change the user name on line 228 in the script.js:
   userName: "YOURNAME"
3. You can also set up the number of Tweets on line 229 now it's set at 5:
   numTweets: 5

Vestibulum mattis, purus quis molestie feugiat, est elit gravida mi, ut vehicula tortor lectus eu erat.

Ut vel dolor sapien. Phasellus mauris risus, euismod sed pretium consequat, aliquet in nisl. Nulla ut ligula id odio sagittis tincidunt. Nam sit amet massa est. Praesent sollicitudin sollicitudin turpis, vel dignissim metus tincidunt sed. Vestibulum mattis, purus quis molestie feugiat, est elit gravida mi, ut vehicula tortor lectus eu erat. Mauris neque nisi, eleifend eu tincidunt nec, sollicitudin vel turpis. Vestibulum mattis, purus quis molestie feugiat, est elit gravida mi, ut vehicula tortor lectus eu erat.

Phasellus non mi vel turpis gravida rhoncus eget lacinia tellus.

Nulla aliquet ornare nulla, id accumsan nunc aliquet quis. Aliquam commodo urna eu enim tempus id consequat felis volutpat.

Aliquam commodo urna eu enim tempus id consequat felis volutpat. Proin gravida nunc suscipit felis aliquet molestie.

Cras placerat lectus eu eros vestibulum in ullamcorper nisl egestas. Nam facilisis dictum pulvinar.

<div class="tabs">
	<ul class="nav">
	<li class="selected"><a href="#tab1">TAB 1 TITLE</a></li>
	<li><a href="#tab2">TAB 2 TITLE</a></li>
	<li><a href="#tab3">TAB 3 TITLE</a></li>
	</ul>
	<div id="tab1" class="tab-content">
	<div class="inner">
	<!-- insert text content here -->
	</div>
	</div>
	<div id="tab2" class="tab-content">
	<div class="inner">
	<!-- insert text content here -->
	</div>
	</div>
	<div id="tab3" class="tab-content">
	<div class="inner">
	<!-- insert text content here -->
	</div>
	</div>
	</div>
	

1. Create a block with tabs class (class="tabs").

   <div class="tabs"> </div>

2. Created a bulleted list with nav class inside this block(<ul class="nav">).
3. Each list item would represent a tab:

   <li><a href="#tab1">...</a></li>

   The href attribute contains the reference to the content block (This will be content inside the tab).
4. Add a selected class to the first list item.
5. Then you will have to create a set of <div> tags with the tab-content class (class="tab-content"), that represents the tabs content. In order to add paddings to the content you will have to use <div> with inner class.

   <div id="tab1" class="tab-content">
   			<div class="inner">
   			  <!-- insert content here -->
   			</div>
   		  </div>
   		  

   Make sure that you specify a unique id for each and every tab(id="tab#")

<dl id="accordion"> 
	<dt><a href="#">Envato</a></dt> 
	<dd> 
	<div class="indent"> 
	<ul class="sub_menu"> 
	<li><a href="#">The Envato Vatos</a></li> 
	<li><a href="#">This & That</a></li> 
	....
	</ul> 
	</div> 
	</dd> 
	<dt><a href="#">Holy Mackarel</a></dt> 
	<dd> 
	<div class="indent"> 
	<ul class="sub_menu"> 
	<li><a href="#">One</a></li> 
	<li><a href="#">Two</a></li> 
	<li><a href="#">Three</a></li> 
	
	...
	</ul> 
	</div> 
	</dd> 
	</dl>