css tabs based on definition list

HTML

<div id="wrap">
    <dl>
        <dt id="ft"><a href="#tab1">TAB 1</a></dt>
            <dd id="tab1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in est vitae turpis dictum facilisis at in est. Fusce vehicula vehicula bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pharetra quam eget augue hendrerit sit amet pulvinar lacus cursus. Suspendisse non dui quam. Donec urna risus, rutrum et condimentum vel, ornare et nisl. Proin eget ante vel turpis dignissim imperdiet id in sem. Duis eu erat at lorem dapibus rutrum non et dui. In consectetur libero et arcu porta eu rhoncus arcu posuere.

Phasellus ut urna sapien, sit amet tempus nisl. Suspendisse potenti. Phasellus at est lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rutrum nunc ut turpis laoreet ullamcorper pharetra eros imperdiet. Phasellus gravida, lectus non euismod sollicitudin, dui erat tristique elit, eu tristique enim magna ut sem. Nam id urna ut nibh auctor pharetra in eget mauris. Etiam orci est, tincidunt a feugiat non, vehicula id nisi. Proin blandit imperdiet ligula. Vivamus in accumsan eros. Sed ullamcorper ante ac velit porttitor tincidunt. Suspendisse imperdiet est sit amet nulla dictum luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in est vitae turpis dictum facilisis at in est. Fusce vehicula vehicula bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pharetra quam eget augue hendrerit sit amet pulvinar lacus cursus. Suspendisse non dui quam. Donec urna risus, rutrum et condimentum vel, ornare et nisl. Proin eget ante vel turpis dignissim imperdiet id in sem. Duis eu erat at lorem dapibus rutrum non et dui. In consectetur libero et arcu porta eu rhoncus arcu posuere.

Phasellus ut urna sapien, sit amet tempus nisl. Suspendisse potenti. Phasellus at est lectus. Cum sociis natoque penatibus et magnis dis...

CSS

* {
    margin: 0;
    padding: 0;
}

#wrap, dt {position: absolute;}

#wrap {
    left: 200px;
    top: 150px;
}

dl {overflow: hidden;}

dt {top: -36px;}

dd, dl {
    width: 640px;
    height: 400px;
}

#st {left: 92px;}
#tt {left: 184px;}

/* decorations
------------------------------------*/

#tab1, #tab2, #tab3 {
    text-align: center;
    padding-top: 50px;
}

#tab1 {
    background-color: #C9CEFF;
}

#tab2 {
    background-color: #ABC1E8;
}

#tab3 {
    background-color: #BCE6FF;
}

#ft a{
    background-color: #C9CEFF;
}

#st a{
    background-color: #ABC1E8;
}

#tt a{
    background-color: #BCE6FF;
}
a {
    color: white;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 200%;
}