* {
margin:0;
padding:0;
}
body {
font:100%/1.25 "Times New Roman", Times, serif, Arial;
}
h1 {
text-align:center;
margin:25px 0;
}
#tabs {
width:95%;
margin:60px auto;
height:600px;
border:1px solid #000;
position:relative;
background:#ccc;
}
#tabs p {
margin:0 0 10px;
font-weight:normal;
}
#tabs a {
color:#000;
outline:0;
font-weight:bold;
text-decoration:underline;
}
#tabs a:active, #tabs a:focus, #tabs a:hover {
text-decoration:none;
}
#tabs ul {
position:absolute;
top:-30px;left:-1px;
list-style:none;
width:101%;
font-weight:bold;
}
#tabs li {
background:#999;
border:1px solid #000;
border-right:0;
float:left;
height:20px;
width:103px;
padding:4px 0;
text-align:center;
cursor:pointer;
}
#tabs li:hover {
background:#ccc;
height:21px;
border-bottom:0;
}
#tabs #last {
border-right:1px solid #000;
}
/* ---------- Hide/Show Div ---------- */
#tabs div {
position:absolute;
top:30px;left:-999em;
height:600px;
width:95%;
padding:0 20px;
border-top:20px solid #ccc;
border-bottom:20px solid #ccc;
cursor:auto;
font-weight:normal;
text-align:left;
overflow:auto;
}
#tabs li:hover div {
left:1px;
}
/* ------------ Default ------------ */
#tabs #default {
left:1px;
}
#tabs .default {
position:absolute;
top:1px;left:1px;
background:#ccc;
height:21px;
width:103px;
padding:4px 0;
text-align:center;
}
#tabs ul:hover .default, #tabs ul:hover #default {
display:none;
}