@charset "utf-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #42413C;
	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. */
	color: #036;
	text-align: center;
}
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: #42413C;
	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: #6E6C64;
	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;
}

.container {
	width: 100%;
	background-color: #FFF; /* genişlik ile eşleştirilen kenarlardaki otomatik değer, mizanpajı ortalar */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	float: left;
}

/* ~~ü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 {
	height: 250px;
	float: left;
	width: 100%;
	background-image: url(../images/headernotittle.png);
	background-repeat: no-repeat;
}

/* ~~ 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. Ayrıca, div’deki öğenin dolgusunu kaldırıp içine genişliği olmayan ikinci bir div ve tasarımınız için gerekli olan dolguyu yerleştirebilirsiniz.

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: 264px;
	background-color: #0076bd;
	padding-top: 5px;
	height: auto;
}
.content {
	width: 800px;
	float: left;
	margin-top: 5px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 5px;
	page-break-before: left;
	page-break-after: left;
	font-size: 14px;
}

/* ~~ 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. */
	width: 160px;  /*bu genişlik düğmenin tamamını IE6 için tıklatılabilir hale getirir. IE6’yı desteklemeniz gerekmiyorsa, kaldırılabilir. Bu bağdaki dolguyu yan çubuk kabınızın genişliğinden çıkararak uygun genişliği hesaplayın. */
	text-decoration: none;
	background-color: #C6D580;
}
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-color: #ADB96E;
	color: #FFF;
}

/* ~~ Altbilgi ~~ */
.footer {
	background-color: #FFFFFF;
	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 */
	width: 100%;
	height: 125px;
	background-image: url(../images/siyah%20footer125.png);
	background-repeat: no-repeat;
}

/* ~~ ç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;
}
.container .content table tr td {

div.paleBlueRows {
  font-family: Verdana, Geneva, sans-serif;
  border: 10px solid #FFFFFF;
  width: 350px;
  height: 200px;
  text-align: center;
  border-collapse: collapse;
}
.divTable.paleBlueRows .divTableCell, .divTable.paleBlueRows .divTableHead {
  border: 1px solid #FFFFFF;
  padding: 2px 2px;
}
.divTable.paleBlueRows .divTableBody .divTableCell {
  font-size: 13px;
}
.divTable.paleBlueRows .divTableRow:nth-child(even) {
  background: #F4F4F4;
}
.paleBlueRows .tableFootStyle {
  font-size: 14px;
}
.paleBlueRows .tableFootStyle .links {
	 text-align: right;
}
.paleBlueRows .tableFootStyle .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
.paleBlueRows.outerTableFooter {
  border-top: none;
}
.paleBlueRows.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
.content table tr th {
	text-align: center;
	color: #036;
}
.container .content table {
	text-align: left;
	font-size: 14px;
}
	
	
	
	/**
 * 	CSS3 Only Horizontal Accordion
 */

html {
  background-color:#996600;
}

 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/* Image Align with in the slider */
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*Define Accordion box*/
.accordion { width:830px; overflow:hidden; margin:10px auto; color:#474747; background:#414141; padding:10px; }

/*General Accordion****************************************************************************/
/*Set style of open slide*/
.accordion section:target { background:#FFF; padding:10px;}
.accordion section:target:hover { background:#FFF; }
.accordion section:target h2 {width:100%;}
.accordion section:target h2 a{ color:#333; padding:0;}
.accordion section:target p {display:block;}
.accordion section h2 a{padding:8px 10px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }

/*set style of closed slide*/
.accordion section{ float:left;	overflow:hidden; color:#333; cursor:pointer; background: #333; margin:3px; }
.accordion section:hover {background:#444;}
.accordion section p { display:none; }
.accordion section:after{position:relative;font-size:24px;color:#000;font-weight:bold;}
.accordion section:nth-child(1):after{content:'1';}
.accordion section:nth-child(2):after{content:'2';}
.accordion section:nth-child(3):after{content:'3';}
.accordion section:nth-child(4):after{content:'4';}
.accordion section:nth-child(5):after{content:'5';}
/*End General Accordion****************************************************************************/

/*Horizontal Accordion *********************************************************************/
.horizontal section{ width:5%; height:250px; 
	-moz-transition:width 0.2s ease-out; 
	-webkit-transition:width 0.2s ease-out;
  	-o-transition:width 0.2s ease-out;
	-ms-transition:width 0.2s ease-out;
  	transition:width 0.2s ease-out;
}

/*Position the number of the slide*/
.horizontal section:after{top:140px;left:15px;}

/*Header of closed slide*/
.horizontal section h2 { 
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	width:240px; position:relative; left:-100px; top:85px;
} 

/*On mouse over open slide*/
.horizontal :target{ width:73%;height:230px; }
.horizontal :target h2{ top:0px;left:0;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg); 
}
/*End Horizontal Accordion *********************************************************************/
	
	