<style type="text/css">
body {
margin: 0px;
background-image: url('http://img.webme.com/pic/b/bs-aktif/arkaplan.png');
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18pt;
}
#tasiyici {
width: 590px;
margin: 0 auto;
}
#turuncu {
margin: 20px 0px 0px 0px;
display: inline-table;
}
#turuncu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#turuncu ul li {
width: 44px;
height: 50px;
float: left;
text-align: center;
line-height: 45px;
margin: 0px 10px 0px 0px;
color: #ffffff;
text-shadow: 1px 1px #000000;
}
#turuncu ul li a {
background-image: url('http://img.webme.com/pic/b/bs-aktif/turuncu.png');
display: block;
height: 50px;
text-decoration: none;
color: #ffffff;
text-shadow: 1px 1px #d05c03;
}
#turuncu ul li a:hover, .active {
background-position: 0px -50px;
}
#yesil {
margin: 20px 0px 0px 0px;
display: inline-table;
}
#yesil ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#yesil ul li {
width: 44px;
height: 50px;
float: left;
text-align: center;
line-height: 45px;
margin: 0px 10px 0px 0px;
color: #ffffff;
text-shadow: 1px 1px #000000;
}
#yesil ul li a {
background-image: url('http://img.webme.com/pic/b/bs-aktif/yesil.png');
display: block;
height: 50px;
text-decoration: none;
color: #ffffff;
text-shadow: 1px 1px #beb404;
}
#yesil ul li a:hover, .active {
background-position: 0px -50px;
}
#pembe {
margin: 20px 0px 0px 0px;
display: inline-table;
}
#pembe ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#pembe ul li {
width: 44px;
height: 50px;
float: left;
text-align: center;
line-height: 45px;
margin: 0px 10px 0px 0px;
color: #ffffff;
text-shadow: 1px 1px #000000;
}
#pembe ul li a {
background-image: url('http://img.webme.com/pic/b/bs-aktif/pembe.png');
display: block;
height: 50px;
text-decoration: none;
color: #ffffff;
text-shadow: 1px 1px #985151;
}
#pembe ul li a:hover, .active {
background-position: 0px -50px;
}
.ok-sol {
background-image: url('http://img.webme.com/pic/b/bs-aktif/ok.png')!important;
}
.ok-sol:hover {
background-position: 0px 0px!important;
}
.ok-sag {
background-image: url('http://img.webme.com/pic/b/bs-aktif/ok.png')!important;
background-position: 0px -50px;
}
.ok-sag :hover {
background-position: 0px 0px!important;
}
</style>
<div id="tasiyici">
<div id="turuncu">
<ul>
<li><a class="ok-sol" href="#"></a></li>
<li><a class="active" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>...</li>
<li><a href="#">25</a></li>
<li><a class="ok-sag" href="#"></a></li>
</ul>
</div>
<div id="yesil">
<ul>
<li><a class="ok-sol" href="#"></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a class="active" href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>...</li>
<li><a href="#">25</a></li>
<li><a class="ok-sag" href="#"></a></li>
</ul>
</div>
<div id="pembe">
<ul>
<li><a class="ok-sol" href="#"></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a class="active" href="#">5</a></li>
<li>...</li>
<li><a href="#">25</a></li>
<li><a class="ok-sag" href="#"></a></li>
</ul>
</div>
</div>
