<style type="text/css">
<!--
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #FFF;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ Öğe/etiket seçiciler ~~ */
ul, ol, dl { /* Tarayıcıların arasındaki çeşitlemelerden dolayı, listelerde dolgu ve kenar boşluğunu sıfırlamakta fayda vardır. Tutarlılık sağlamak için, istediğiniz miktarları burada veya içerdikleri liste öğelerinde (LI, DT, DD) belirtebilirsiniz. Burada yaptığınızın siz daha belirli bir seçici yazmadığınız sürece .nav listesine basamaklanacağını unutmayın. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* üst kenar boşluğunu kaldırmak kenar boşluklarının onları içeren div'den kaçabilecekleri bir duruma sebep olur. Kalan alt kenar boşluğu onu takip eden herhangi bir öğeden uzak tutar. */
	padding-right: 15px;
	padding-left: 15px; /* div'lerin kendisinin yerine onların içindeki öğelerin kenarlarına dolgu eklemek, herhangi bir kutu modeli matematiğinin olmamasını sağlar. Ayrıca kenar dolgulu bir yuvalanmış div de alternatif bir yöntem olarak kullanılabilir. */
}
a img { /* bu seçici, bazı tarayıcılarda görüntü bir bağla çevrelendiğinde görüntünün etrafında görüntülenen varsayılan mavi kenarlığı kaldırır. */
	border: none;
}

/* ~~ Sitenizin bağlarının stili, hover efektini oluşturan seçiciler grubu da dahil olmak üzere, şu sırada kalmalıdır. ~~ */
a:link {
	color:#414958;
	text-decoration: underline; /* bağlarınıza aşırı derecede benzersiz görüneceği şekilde stil vermediğiniz sürece, hızlı görsel tanımlama olabilmesi için yapılabilecek en iyi şey alt çizgi sağlamaktır.  */
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* bu seçiciler grubu, bir klavye gezginine fare kullanan bir kişiyle aynı hover (üzerine gelme) deneyimini sağlayacaktır. */
	text-decoration: none;
}
.box {
	font-family: Verdana, Geneva, sans-serif;
	text-align: center;
	height: 30px;
	width: 800px;
	background-color: #36639A;
	font-size: 18px;
	color: #FFF;
	font-weight: bold;
}
/* ~~ bu kap onlara yüzde tabanlı genişliğini veren diğer tüm div'leri çevreler ~~ */
.container {
	width: 80%;
	max-width: 1260px;/* bu mizanpajın büyük bir ekranda fazla geniş olmasını önlemek için bir maksimum genişlik istenebilir. Bu, satır uzunluğunu daha okunabilir hale getirir. IE6 bu bildirimi kabul etmez.  */
	min-width: 780px;/* bu mizanpajın fazla dar olmasını önlemek için bir minimum genişlik istenebilir. Bu, yan sütunlarda satır uzunluğunu daha okunabilir hale getirir. IE6 bu bildirimi kabul etmez.  */
	background: #FFF;
	margin: 0 auto; /* kenarlardaki otomatik değer, genişlikle eşleştirildiğinde, mizanpajı ortalar. .container öğesinin genişliğini %100 olacak şekilde ayarlarsanız bu gerekmez. */
}

/* ~~ üstbilgi belirli bir genişlik değildir. Mizanpajınızın tüm genişliğini uzatır. Sizin kendi bağlı logonuzla değiştirilmesi gereken bir görüntü yer tutucusu içerir ~~ */
.header {
	background: #FFF;
}

/* ~~ Bunlar mizanpaj sütunlarıdır. ~~  

1) Dolgu yalnızca div'lerin üst ve/veya alt kısmına yerleştirilir. Bu dolguların içindeki öğelerin kenarlarında dolgu vardır. Bu sizi herhangi bir "kutu modeli matematiğinden" kurtarır. Div'in kendisine herhangi bir kenar dolgusu veya kenarlık eklerseniz, bu *toplam* genişliği oluşturmak için tanımladığınız genişliğe eklenir. Ayrıca div'deki öğenin dolgusunu kaldırıp içine genişliği olmayan yeni bir div ve tasarımınız için gerekli olan dolguyu yerleştirmeyi de seçebilirsiniz.

2) Hepsi yüzdürüldüğünden, sütunlara herhangi bir kenar boşluğu eklenmedi. Bir kenar boşluğu eklemeniz gerekiyorsa, onu yüzdürdüğünüz tarafa yerleştirmekten kaçının (örneğin: sağa yüzecek şekilde ayarlanan bir sağ kenar boşluğu). Çoğu zaman, onun yerine dolgu kullanılabilir. Bu kuralın kırılması gereken div'ler için, Internet Explorer'ın çift kenar boşluğuna sahip olduğu bazı sürümlerindeki bir hatayı gidermek amacıyla, div'in kuralına bir "display:inline" bildirimi eklemeniz gerekir.

3) Sınıflar bir belgede bir kereden fazla kullanılabildiği için ( ve bir öğeye de birden çok sınıf uygulanabildiğinden), sütunlara kimlikler yerine sınıf adları eklenmiştir. Örneğin, iki yan çubuk div'i gerektiğinde yığınlanabilir. Tercihiniz buysa, belge başına bir kere kullandığınız sürece bunlar kolaylıkla kimlikler olarak değiştirilebilir.

4) Gezinme çubuğunuzun sol yerine sağ tarafta olmasını tercih ediyorsanız, bu sütunları ters yönde yüzdürmeniz yeterlidir (hepsini sola yüzdürmek yerine hepsini sağa yüzdürmek) ve böylece ters sırada yüzeceklerdir. Bir HTML kaynağında div'lerin yerini oynatmaya gerek yoktur.

*/
.sidebar1 {
	float: left;
	width: 20%;
	background: #FFF;
	padding-bottom: 10px;
}
.content {
	padding: 10px 0;
	width: 80%;
	float: left;
}

/* ~~ Bu gruplanan seçici .content alanındaki listeleri verir ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* bu dolgu yukarıda üstbilgilerdeki ve paragraf kuralındaki sağ dolguyu yansıtır. Dolgu, listelerdeki diğer öğeler arasındaki alan için alta ve satırbaşını oluşturmak için sola yerleştirilir. Bunlar istediğiniz gibi ayarlanabilir.  */
}

/* ~~ Gezinme listesi stilleri (Spry gibi bir önceden yapılmış açılır pencere menüsü kullanmayı tercih ederseniz kaldırılabilir) ~~ */
ul.nav {
	list-style: none; /* bu, liste işaretleyicisini kaldırır */
	border-top: 1px solid #666; /* bu, bağlar için üst kenarlık oluşturur – diğerlerinin tümü LI'da bir alt kenarlık kullanılarak yerleştirilir */
	margin-bottom: 15px; /* bu aşağıdaki içerikteki gezinmenin arasındaki alanı oluşturur */
}
ul.nav li {
	border-bottom: 1px solid #666; /* bu düğme ayrımını oluşturur */
}
ul.nav a, ul.nav a:visited { /* bu seçicileri gruplamak, bağlarınızın ziyaret edildikten sonra bile düğme görünümünü kaybetmemesini sağlar */
	padding: 5px 5px 5px 15px;
	display: block; /* bu, bağa blok özellikleri ekleyerek onu içeren LI'nın tamamının doldurmasını sağlar. Bu, alanın tümünün fare tıklatılmasına tepki vermesini sağlar. */
	text-decoration: none;
	background: #8090AB;
	color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* bu, fare ve klavye gezginleri için arka plan ve metin rengini değiştirir */
	background: #6F7D94;
	color: #FFF;
}

/* ~~ Altbilgi ~~ */
.footer {
	padding: 10px 0;
	background: #6F7D94;
	position: relative;/* bu, temizlemenin düzgün olması için IE6'ya hasLayout öğesini verir */
	clear: both; /* bu temizleme özelliği .container öğesini sütunların nerede bittiğini anlamaya ve onları içermeye zorlar */
}

/* ~~ çeşitli float/clear sınıfları ~~ */
.fltrt {  /* bu sınıf bir öğeyi sayfanızın sağında yüzdürmek için kullanılabilir. Yüzen öğe sayfada olması gereken bir sonraki öğeden önce gelmelidir. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* bu sınıf bir öğeyi sayfanızın solunda yüzdürmek için kullanılabilir. Yüzen öğe sayfada olması gereken bir sonraki öğeden önce gelmelidir. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* bu sınıf, #footer kaldırılırsa veya #container öğesinden çıkarılırsa, son yüzdürülen div'i (#container öğesi içinde) takiben bir <br /> veya boş bir div'e yerleştirilebilir */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.linkespalte {
	float: left;
	width: 200px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	text-align: left;
	font-weight: bold;
}
.rechtespalte {
	float: right;
	width: 580px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* 1 pks negatif kenar boşluğu, bu mizanpajdaki sütunların herhangi birine aynı düzeltici etki ile yerleştirilebilir. */
ul.nav a { zoom: 1; }  /* yakınlaştırma özelliği IE tarayıcısına bağların arasındaki ekstra boşluğu düzeltmesi için gereken hasLayout tetikleyicisini verir */
</style>
<![endif]--></head>