/*  Css ile kodlama yaparken bir kutuyu tarayıcıda
    istediğimiz bir noktada konumlandırmak için "positon:absolute"
    kodunu kullanırız.

    Eğer kodlama sırasında başka bir kutuya "position:relative"
    özelliği verildiyse bu sefer "positon:absolute" özeliğine sahip
    kutular ona bağlanıyor. */

#slider
{
    width:590px;
    height:280px; 
    padding:0; 
    margin:0; 
    float:left; 
    position:relative; 
    overflow:hidden; 
    border:2px solid #F5F5F5;
    font-family:Trebuchet MS;
    font-size:11px;
}
#slider .slides 
{ 
    width:auto; 
    height:255px; 
    float:left; 
    position:relative; 
    overflow:hidden; 
    left:0; 
}
#slider .slide 
{ 
    width:590px; 
    float:left; 
}
#slider .slide img 
{ 
    border:none; 
    padding:0; 
}
#slider .navSlides
{ 
    width:590px; 
    height:25px;
    float:left; 
    background-image:url('resimler/siralama-arkapkan.gif'); 
    background-repeat:repeat-x;
}
#slider .navSlides ul 
{ 
    list-style-type:none; 
    margin:5px 0 0 5px; 
    padding:1px 0 0 0; 
}
#slider .navSlides li 
{ 
    float:left; 
    margin:0 1px 0 0; 
}
#slider .navSlides a 
{ 
    font-size:11px;
    width:20px; 
    text-align:center; 
    text-decoration:none; 
    color:#333; 
    display:block;
}
#slider .navSlides li.next a,
#slider .navSlides li.prev a 
{ 
    margin:2px 5px 0 10px;
    text-indent:-1000px; 
    overflow:hidden;
}
#slider .navSlides li.next a 
{ 
    background-image:url('resimler/siralama-ileri.png'); 
    background-repeat:no-repeat;
}
#slider .navSlides li.prev a 
{ 
    background-image:url('resimler/siralama-geri.png');
    background-repeat:no-repeat;
}
#slider .navSlides li.active 
{
 
}
#slider .navSlides li.active a 
{ 
    width:15px;
    font-weight:bold;
    color:White;
    background-image:url('resimler/siralama-sira.png');
    background-repeat:no-repeat;
}
#slider .progressBar 
{ 
    width:50px; 
    height:5px; 
    background:#a0a0a0; 
    float:right; 
    margin:5px 15px 0 0; 
}
#slider .progressBar .bar 
{ 
    background:#c5c5c5; 
    height:5px; 
    width:0; 
}