#wrap {margin:0 auto;width:900px}


#menualani {width:300px;display:block;float:left}

/* Menümüzün ikon alanını aşağıda tanımalamaya başlıyoruz. Sonrasında her bir menü ikonumuzu tanımlayacağız. */
.ikonalani {width:42px;display:block;float:left;position:relative;z-index:999;}

/* ikon1, ikon2 ve ikon3 için ortak stil tanımlaması yapıyoruz. Özelleştirmeleri aşağıdaki kodlarda işleyeceğiz */
/* text-indent:-9999px değeri ile ikonlarımızdaki metin bağlantıları ortadan kaldırıyoruz */

a.ikon1, a.ikon2, a.ikon3 {
text-decoration:none;
display:block;
outline:none;
text-indent:-9999px;
width:40px;
height:40px;
}

/* Şimdi ikonlarımız için özel olarak arkaplan resmi tanımlıyoruz. */

a.ikon1 {
background:#fff url(resim1.png) no-repeat center center;
margin-top:10px;
}

a.ikon2 {
background:#fff url(resim2.png) no-repeat center center;
}

a.ikon3 {
background:#fff url(resim3.png) no-repeat center center;
}

/* Menümüzde aktif olarak görünecek olan ikonu .aktifikon sınıfı içinde tanımlıyoruz. Parametrelere dikkat! */

a.aktifikon {

background-color:#ddd;
width:40px;
height:40px;
border-top:2px solid #bbb;
border-left:2px solid #bbb;
border-bottom:2px solid #bbb;
border-right:2px solid #ddd;
display:block;
-moz-border-radius:6px 0px 0px 6px; /* Firefox için köşe yuvarlatalım */
-webkit-border-radius:6px 0px 0px 6px; /* Google Chrome ve Safari için köşe yuvarlatalım */
border-radius: 6px 0px 0px 6px; /* Opera için köşe yuvarlatalım */
}


/* BU ALANDAN SONRA İÇERİK ALANIMIZI TANIMLAMAYA BAŞLAYACAĞIZ... */

/* İçerikalaninin z-index'ini ikon alanından daha düşük bir sayıyla tanımlayarak daha altta kalmasını sağlıyoruz... */
/* z:index:1 */

.icerikalani {width:250px;background:#f5f5f5;float:left;position:relative;z-index:1;display:block}

/* Dikkat! Tüm içerik isimli alanları display:none ile gizliyoruz */
.icerik1, .icerik2, .icerik3 {display:none}


.icerik1, .icerik2, .icerik3 {
background:#ddd;
color:#fff;
height:300px;
top:48px;
border:2px solid #bbb;
margin-left:0px;

/* Bu kez her bir içerik alanımız için köşe yuvarlatıyoruz. Tabiki farklı tarayıcılar için farklı kodlarla :( */
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius: 6px; 
}

/* Daha önce gizlediğimiz tüm icerik alanlarına bu sınıf eklenerek görünür hale gelecek. */
/* display:block bu gösterim için yeterli */
.goster {display:block;}



/* Bu alandan sonraki kodlar icerik isimli sınıfı güzel bir görünüme kavuşturmak için oluşturduğum css kodları */
/* Genel olarak başlık, sırasız liste [menümüz], paragraf ve bağlantı etiketlerini .icerikalani sınıfı içinde tanımladım */

.icerikalani h2 {font:bold 16px arial, verdana, sans-serif;padding:0px 10px 0px 10px;color:#333;text-shadow:0px 1px 2px #fff}
.icerikalani ul {list-style:none;margin:0;padding:0px 10px 0px 10px;}
.icerikalani li {padding:0;margin:0}
.icerikalani ul li a {text-decoration:none;color:#333;background:#ddd;font:12px arial, verdana, sans-serif;border-top:1px solid #eee;border-bottom:1px solid #ccc;padding:6px;margin:0;display:block}
.icerikalani ul li a:hover {text-decoration:none;color:#fff;background:#333;font:12px arial, verdana, sans-serif;border-top:1px solid #ccc;border-bottom:1px solid #aaa;padding:6px;margin:0;display:block;text-shadow:0px 1px 2px #fff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius: 4px; 
}
.icerikalani p {font:13px/24px arial, verdana, sans-serif;padding:0px 10px 0px 10px;color:#666;}
.icerikalani p a {padding:4px;background:#2e83ff;color:#fff;text-decoration:none}
.icerikalani p a:hover {padding:4px;background:#666;color:#fff;text-decoration:none}