@charset "UTF-8";
/* CSS Document */

#respondBody {
	background-color: #f5f5f5;
}

* {
    box-sizing: border-box;
	margin: 0 auto;
    padding: 0;
	text-align: center;
}

a:link {color:#1B1B1B; text-decoration: none;}
a:visited {color:#1B1B1B;  text-decoration: none;}
a:hover {color:#ffb400;  text-decoration: none;}

a.LinkTypeOne:link {color:#fff; text-decoration: none;}
a.LinkTypeOne:visited {color:#fff; text-decoration: none;}
a.LinkTypeOne:hover {color:#ffb400; text-decoration: none;}

div {font-family:'Roboto';font-size: 16px;}
h1 {font-size: 20px;}
h2 {font-size: 18px;}
h3 {font-size: 16px;}
#header {width: 1000px;}

.MarginBottom10 { margin-bottom: 10px;}
.margin8px {margin: 8px;}
.margin8080 {margin: 8px 0 8px 0;}

/* Menü Linkleri Başlar */
.menu {margin-top: 10px;}
	
.menu ul {list-style-type:none;}
.menu ul li { display: inline-block; margin: 0 5%;}
	
.menu ul li a {
	padding: 10px 0;
	font-size:18px;
	font-weight: bold;
	color:#2c2c2c;
	text-decoration:none;
	position: relative;
}
.menu ul li a:active { background-color: #ffb400; }

.menu ul li a::before {
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 3px;
  left: 0;
  background-color: #ffb400;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.1s ease-in-out ;
}

.menu ul li a:hover::before { visibility: visible; transform: scaleX(1);}
.active{color:#ffa800!important; }

/* Menü Linkleri Biter */

/* Search alanındaki textbox başlar */
#search input[type=text] {
  width: 60%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 25px;
  box-sizing: border-box;
  outline: none;
  font-size: 16px;
}

#search input[type=text]:focus {
  /* font-size: 16px;*/
  border: 2px solid #e99d39;
}

#search button {
  border: none;
  cursor: pointer;
  background: none;
  padding: 8px 0 0 0;
}

#search img { margin-bottom: -11px; }

.responsiveIMG_ic {
  width: 100%;
  max-width: 970px;
  height: auto;
  margin: 8px 0 8px 0;
}
.responsiveIMG_dis {
  width: 100%;
  max-width: 970px;
  height: auto;
  margin: 8px 0 8px 0;
}

/* Content Başlar */
.content {width: 990px;}
/* En Popüler Akorlar Başlar */
.EnPoluler {
	width: 100%;
	border-radius: 16px;
	padding: 10px;
	background-color: #fff;
	box-shadow: 0 0 10px #ddd;
	
}

.column {
  float: left;
  width: 49%;
  padding: 5px 0 5px 0;
  margin: 2px 0 2px 0;
  border-bottom-color: #ddd;
  border-bottom-style: dashed;

}
.columnTekli {
  float: left;
  width: 100%;
  padding: 5px 0 5px 0;
  margin: 2px 0 2px 0;
  border-bottom-color: #ddd;
  border-bottom-style: dashed;

}

.columnEk {margin-left: 8px; /*iki columb arasını biraz açar */}

.row { display: table; clear: both; width: 100%;}
.AkorHarf {
	display: table;
	float: left;
	width: 30px;
	height: 10px;
	padding: 5px;
	background-color: #ffa800;
	border-radius: 8px;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
}

.SarkiciAdi {
    float: left;
    width: calc(100% - 30px);
	padding: 5px 0 0 10px;
	text-align: left;
}
.AlanAdi {
    font-size: 13px;
	color: #ffa800;
}
.TLButtonDiv {
	width: 120px;
	margin: 14px auto 5px auto;
}
.TLButton {
	background-color: #ffa800;
	border-radius: 8px;
	width: 120px;
	padding: 6px;
	font-size: 20px;
	margin: 12px auto 4px auto;
}
.Sayfalandirma {
	color: #ffa800;

}
.pagination {
	display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination li {
	display: inline;
	padding: 10px;
	border: 1px #cccccc solid;
	border-radius: 12px;
}
/* .active {background-color:#ffa800; }*/
.disabled {color: #1B1B1B;}
/* En Popüler Akorlar Biter */

/* Sarki-sozu-akor bölümü başlar */
span.c { 
  font-weight: bold; 
  color: #ee8131;
}

pre {font-family: 'Open Sans', sans-serif !important;

}
.transpose-keys {
	padding: 6px;
	overflow: auto;
	border-radius: 6px;
	border: 1px solid #ccc;
}
.transpose-keys a{ 
	display: block;
	float: left;
	width: 43px;
	text-align: center;
	margin: 0.6%;
	color: #333;
	background: #fff;
	border-radius: 6px;
	border: 1px solid #ccc;
	text-decoration: none;
	padding: 10px;
	outline: none;
}
.transpose-keys a.selected { 
  background: #ffa800; 
  color: #FFF;
}
.sarkiSozuDiv {margin: 8px;}
#sarkiSozuPre {overflow: scroll; text-align: left; display: block; white-space: pre; margin: 1em 0px;}

.yaziFontDiv {text-align: left;}
.yaziFontDiv span {
    margin: 2px;
    padding: 8px;
    width: 40px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    font-size: 16px;
    background: #fff;
    color: #333;
}
/* Footer Bölümü Başlar */

#footerWeb {
	width: 100%;
	padding: 10px 0 10px 0;
	background-color: #676767;
	border-top: 3px solid #ffb400;
	height: 200px;
	color: white;
	text-align: left;
}
#footerMobile {
	display: none;
	width: 100%;
	background-color: #676767;
	border-top: 3px solid #ffb400;
	color: white;
	text-align: left;
}
.font10px {font-size: 10px;}
.sosyalButtons img {width: 47px; fill: white;}
/* .footerBaslik {font-size: 22px;} */
.footerList {font-size: 13px;}
.textRight {text-align: right;}
.textLeft {text-align: left;}
.text-center {text-align: center;}


@media only screen and (max-width:1000px) {
  /* For tablets: */


}
@media only screen and (max-width:998px) {
  /* For mobile phones: */
bodySil {padding: 0 8px 0 8px;}
.content, .contentList, #header, #respondBody {width: 100%;}
.column, .row, .footerItems {width: 100%;}
.menu ul li {margin: 0 1%;}
.columnEk { margin-left: 0;}
.EnPoluler { width: calc(100% - 16px);}
.responsiveIMG_ic {width: 100%; height: auto;}
.responsiveIMG_dis {width: 100%; height: auto; padding: 8px;}
/* Sarki-sozu-akor bölümü başlar */
.sarkiSozuDiv {margin: 8px 0 8px 0;}
.transpose-keys {padding: 3px;}
.transpose-keys a {font-size: 14px; width: 32px; padding: 5px; margin: 0.8%;}
#sarkiSozuPre {font-size: 14px;}
}

@media only screen and (max-width:550px) {
  /* For tablets: */
#footerWeb {display: none;}
#footerMobile {display: block; padding: 20px;}
}