Updates Tab #1

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

.tabcon {
	position: fixed;
	left: 0px;
	top: 25px;
}

.con {
	height: 0px;
	opacity: 0;
	position: relative;
	left: 39px;
	top: 0px;
	width: 110px;
	background: transparent;
	color: #777;
	font-size: 10px;
	text-align: justify;
	font-family: calibri;
	line-height: 110%;
	transition: 0.4s all ease-in-out;
	-webkit-transition: 0.4s all ease-in-out;
	-moz-transition: 0.4s all ease-in-out;
}

.tab1 {
	position: relative;
	height: 22px;
	width: 30px;
	background-color: #ADF4F7;
	border-radius: 0px 10px 10px 0px;
	transition: 0.5s all ease-in-out;
	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
}

.tab1:hover {
	width: 170px;
	transition: 0.5s all ease-in-out;
	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
}

.tab1:hover .con {
	height: auto;
	opacity: 1;
	top: 27px;
	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.6s;
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
}

.tab2 {
	position: relative;
	height: 22px;
	width: 30px;
	background-color: #9CD3E4;
	border-radius: 0px 10px 10px 0px;
	transition: 0.5s all ease-in-out;
	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
}

.tab2:hover {
	width: 170px;
	transition: 0.5s all ease-in-out;
	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
}

.tab2:hover .con {
	height: auto;
	opacity: 1;
	top: 27px;
	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.6s;
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
}

.tab3 {
	position: relative;
	height: 22px;
	width: 30px;
	background-color: #8BB2D0;
	border-radius: 0px 10px 10px 0px;
	transition: 0.5s all ease-in-out;
	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
}

.tab3:hover {
	width: 170px;
	transition: 0.5s all ease-in-out;
	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
}

.tab3:hover .con {
	height: auto;
	opacity: 1;
	top: 27px;
	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.6s;
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
}

.tab4 {
	position: relative;
	height: 22px;
	width: 30px;
	background-color: #7990BD;
	border-radius: 0px 10px 10px 0px;
	transition: 0.5s all ease-in-out;
	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
}

.tab4:hover {
	width: 170px;
	transition: 0.5s all ease-in-out;
	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
}

.tab4:hover .con {
	height: auto;
	opacity: 1;
	top: 27px;
	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.6s;
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
}

.tab5 {
	position: relative;
	height: 22px;
	width: 30px;
	background-color: #686FA9;
	border-radius: 0px 10px 10px 0px;
	transition: 0.5s all ease-in-out;
	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
}

.tab5:hover {
	width: 170px;
	transition: 0.5s all ease-in-out;
	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
}

.tab5:hover .con {
	height: auto;
	opacity: 1;
	top: 27px;
	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.6s;
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;}

.tab6 {
	position: relative;
	height: 22px;
	width: 30px;
	background-color: #574E96;
	border-radius: 0px 10px 10px 0px;
	transition: 0.5s all ease-in-out;
	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
}

.tab6:hover {
	width: 170px;
	transition: 0.5s all ease-in-out;
	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
}

.tab6:hover .con {
	height: auto;
	opacity: 1;
	top: 27px;
	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.6s;
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
}

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

<div class="tabcon">

<div class="tab1"><div class="con">
This is your first tab and it looks pretty nice.  The text will wrap around so you won't have to worry about it.<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 class="tab2"><div class="con">
tab 2 stuff
</div></div>

<div class="tab3"><div class="con">
tab 3 stuff
</div></div>

<div class="tab4"><div class="con">
tab 4 stuff
</div></div>

<div class="tab5"><div class="con">
tab 5 stuff
</div></div>

<div class="tab6"><div class="con">
tab 6 stuff
</div></div>

</div>