Updates Tab #2

*****THIS PART GOES AFTER <STYLE TYPE="TEXT/CSS">********

.tabcon {
	position: fixed;
	left: 20px;
	top: 20px;
}

.context {
	color: black;
	font-family: calibri;
	font-size: 10px;
	text-align: justify;
	opacity: 0;
	width: 110px;
	padding: 5px 10px 5px 10px;
	transition: 0.4s all ease-in-out;
	-webkit-transition: 0.4s all ease-in-out;
	-moz-transition: 0.4s all ease-in-out;
}

.con {
	width: 130px;
	background: #f5f5f5;
	height: 0px;
	top: 3px;
	z-index: 999;
	position: relative;
	transition: 0.4s all ease-in-out;
	-webkit-transition: 0.4s all ease-in-out;
	-moz-transition: 0.4s all ease-in-out;
}

.supertab {
    position: relative;
    width: 15px;
    height: 15px;
    margin-bottom: 20px;
    transition: 0.4s all ease-in-out;
	-webkit-transition: 0.4s all ease-in-out;
	-moz-transition: 0.4s all ease-in-out;
}

.supertab:hover {
	width: 130px;
	transition: 0.4s all ease-in-out;
	-webkit-transition: 0.4s all ease-in-out;
	-moz-transition: 0.4s all ease-in-out;
}

.supertabtitle {
	color: white;
	text-transform: uppercase;
	text-align: center;
	font-size: 9px;
	opacity: 0;
	padding-top: 1px;
	font-family: calibri;
	letter-spacing: 2px;
	transition: 0.4s all ease-in-out;
	-webkit-transition: 0.4s all ease-in-out;
	-moz-transition: 0.4s all ease-in-out;
}

.supertab:hover .supertabtitle {
	opacity: 1;
	transition: 0.4s all ease-in-out;
	-webkit-transition: 0.4s all ease-in-out;
	-moz-transition: 0.4s all ease-in-out;
	transition-delay: 0.4s;
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
}

.supertab:hover .con {
	width: 130px;
	height: 130px;
	transition: 0.4s all ease-in-out;
	-webkit-transition: 0.4s all ease-in-out;
	-moz-transition: 0.4s all ease-in-out;
	transition-delay: 0.8s;
	-webkit-transition-delay: 0.8s;
	-moz-transition-delay: 0.8s;
}

.supertab:hover .context {
	opacity: 1;
	transition: 0.4s all ease-in-out;
	-webkit-transition: 0.4s all ease-in-out;
	-moz-transition: 0.4s all ease-in-out;
	transition-delay: 1.2s;
	-webkit-transition-delay: 1.2s;
	-moz-transition-delay: 1.2s;
}


****THIS PART GOES AFTER <BODY>*******

<div class="tabcon">

<div class="supertab" style="background: #112233;"><div class="supertabtitle">Title</div>
<div class="con"><div class="context">
This is your first tab and it looks pretty nice.  The text will wrap around so you won't have to worry.<p />
You can <b>bold</b> text or <i>italicize</i> it or even <u>underline</u> or <s>strikethrough</s> it.</div>
</div></div>

<div class="supertab" style="background: #445566;"><div class="supertabtitle">Title</div>
<div class="con"><div class="context">
This is your second tab and it looks pretty nice.  You can put lots of things in here depending on what you're interested in for your blog.  Check the next tab for ideas!</div>
</div></div>

<div class="supertab" style="background: #778899;"><div class="supertabtitle">Title</div>
<div class="con"><div class="context">
This is your third tab and it looks pretty nice.  You can put things in these boxes like about you info, blog updates, botms, tumblr awards winners, links, or anything else you'd like!</div>
</div></div>

<div class="supertab" style="background: #aabbcc;"><div class="supertabtitle">Title</div>
<div class="con"><div class="context">
This is your fourth tab and it looks pretty nice.</div>
</div></div>

</div>