/* ==========================================================================
Harici Fontlar
========================================================================== */
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext);

/* ==========================================================================
Temel Stiller
========================================================================== */
html,body { height: 100%;}
body {color: #333; font-size: 14px; font-family: 'PT Sans', sans-serif; background: #f4f4f4 url("../img/arkaplan-tekrar.png") repeat-x 0 600px;}

/* ==========================================================================
   Slider
   ========================================================================== */
#anaSLider {width: 100%; height: 600px; position: absolute; left: 0; top: 0; z-index: 10;}
#anaSLider .bos {width: 100%; height: 600px; position: absolute; left: 0; top: 0; z-index: 10;}
#anaSLider ul {width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; overflow: hidden;}
#anaSLider ul li {width: 100%; height: 100%; position: relative;}
#anaSLider ul li img {width: 100%; min-height: 100%; position: absolute; left: 0; bottom: 0;}

#anaSLider ul li .cpt {width:990px; position: absolute; right: 50%; top: 429px; margin-right: -490px;}
#anaSLider ul li .cpt h2 {height: 60px; margin: 0; padding: 0 25px; background: #e63d00; border-radius: 7px 7px 0 0; float: left; line-height: 60px; font-size: 29px; color:#fff; font-weight: 100;}
#anaSLider ul li .cpt p { float: left; height: 50px; margin:1px 0 0; padding: 0 25px; line-height: 50px; background: #000; background: rgba(0,0,0,0.7); border-radius: 7px 0 7px 7px; color:#fff; font-size: 16px;}

#anaSLider .bx-wrapper,
#anaSLider .bx-viewport { height: 600px;}

/* ==========================================================================
   AnaTablo
   ========================================================================== */
#anaTablo {width: 990px; margin: 0 auto; position: relative; z-index: 100;}

/* ==========================================================================
Header
========================================================================== */
#header {width: 100%; height: 142px; float: left; background: url("../img/header-bg.png") no-repeat; margin-top: 20px; position: relative;}

/* Logo
-------------------- */
#header .logo { float: left; margin: 25px 0 0 57px;}
#header .logo a:active { opacity: 0.7}

/* Ana anaMenu
-------------------- */
#header #anaMenu { min-width: 640px; height: 60px; float: left; position: absolute; bottom: 10px; right: 40px; border-top: 1px dotted #ccc}
#header #anaMenu ul { height: 60px; margin:0; padding: 0; list-style: none;}
#header #anaMenu ul li { height: 60px; float: left; margin:0 5px; line-height: 60px;background: url("../img/menu-ayrac.png") no-repeat right center; padding: 0 10px 0 0; position: relative;}
#header #anaMenu ul li:last-child { background: none}
#header #anaMenu ul li a { padding: 10px 8px; font-size: 14px; color: #000; text-decoration: none; border-radius:4px; font-weight: 700;}
#header #anaMenu ul li:hover a { background: #fff; color: #000;}

#header #anaMenu ul ul li {width: 180px; background: none; padding: 0; margin:0; border-radius: 0}
#header #anaMenu ul ul li a {font-size: 12px; height: auto; display: block; margin:0;}

#header #anaMenu > ul li > ul {width: 180px; height: auto; position: absolute; left: 0; top: 48px; background: #fff; z-index: 9999}
#header #anaMenu ul li ul li {width: 180px; height: 30px;}
#header #anaMenu ul li ul li a {height: auto; line-height: 20px; padding: 6px 12px; margin:0;}
#header #anaMenu > ul li > ul li:hover a {background: #eee;}

#header #anaMenu > ul li > ul li > ul {width: 180px; position: absolute; left: 180px; top: 0; background: #eee;}
#header #anaMenu > ul li > ul li > ul li:hover a {background: #e5e5e5;}

#header #anaMenu > ul li > ul li > ul li > ul li:hover a {background: #ddd;}

#header #anaMenu ul li > ul {display: none;}
#header #anaMenu ul li:hover > ul {display: block;}

/* Destek Hattı
-------------------- */
#header .destekHatti { float: right; position: absolute; top: 20px; right: 40px; background: url("../img/destek-hatti.png") left center no-repeat; padding-left: 30px;}
#header .destekHatti span { color: #737373; font-size: 12px;}

/* ==========================================================================
İçerik
========================================================================== */
#content { float: left; width: 970px;  height: auto; background: #fff; border-radius: 5px; box-shadow: inset 0 -1px 5px rgba(0,0,0,0.1), 0 1px 5px rgba(0,0,0,0.1), 0 -1px 2px rgba(0,0,0,0.1); padding: 10px;}
#content .icerikBaslik { float: left; width: 960px; height: 52px; margin: 0 0 15px 3px; border-radius: 5px 5px 0 0; background: #fafafa url("../img/arkaplan-tekrar.png") repeat-x 0 bottom; line-height: 45px; padding: 0 0 0 10px; font-size: 18px; color: #333; font-weight: 700;}
#content { color: #666; font-size: 13px; line-height: 20px; padding-left: 3px;}

/* Slider
-------------------- */
#slider { width: 990px; height: 383px; float: left; position: relative;}

#slider a { width: 37px; height: 29px; display: block; text-indent: -999em; background: url("../img/slide-oklar.png") no-repeat -99px -99px; float: left; position: absolute;}

#slider a.bx-next { background-position: -37px 0; bottom: 10px; right: 10px;}
#slider a.bx-prev { background-position: 0 0; bottom: 10px; right: 50px;}


/* Anasayfa Kutular
-------------------- */
#anasayfaKutular {float: left; width: 990px;  height: 150px; background: #fff; border-radius: 5px; box-shadow: inset 0 -1px 5px rgba(0,0,0,0.1), 0 1px 5px rgba(0,0,0,0.1), 0 -1px 2px rgba(0,0,0,0.1);}
#anasayfaKutular .kutu {float: left; width: 317px; height: 120px; background: #c00; margin: 15px 0 15px 5px;}

#anasayfaKutular .kutu .resimYeri { border:2px solid #a1a8ad; margin:15px 0 0 10px; float: left}
#anasayfaKutular .kutu .resimYeri img { float: left;}
#anasayfaKutular .kutu .yaziYeri { float: left; margin:15px; width: 175px; color:#3b3b3b; font-size: 12px;}
#anasayfaKutular .kutu .linkYeri { width: auto; height: auto; float: left; margin:0 0 0 12px;}
#anasayfaKutular .kutu .linkYeri a { display: block; background: #99a0a5; color: #fff; font-size: 11px; padding: 8px; text-decoration: none; border-radius: 3px;}
#anasayfaKutular .kutu .linkYeri a:hover { background: #3966c3}


/* Anasayfa Kutular > Hakkımızda 
-------------------- */
#anasayfaKutular .kutu.kutu-1 {margin-left: 15px; background: #e5eff7}


/* Anasayfa Kutular > Ürün Grupları
-------------------- */
#anasayfaKutular .kutu.kutu-2 {background: #e6e6e6}

/* Anasayfa Kutular > Hizmetlerimiz
-------------------- */
#anasayfaKutular .kutu.kutu-3 {background: #d9e3eb}
#anasayfaKutular .kutu.kutu-3 ul { margin:0; padding: 0; list-style:none; width: 305px; padding-top: 10px;}
#anasayfaKutular .kutu.kutu-3 ul li { width: 305px; height: 30px; margin-left:6px; padding: 1px 0; border-radius: 4px;}
#anasayfaKutular .kutu.kutu-3 ul li.l2 { background: url("../img/cizgi.png") no-repeat center top; padding: 2px 0 3px;}
#anasayfaKutular .kutu.kutu-3 ul li a { line-height: 30px; color:#000; text-decoration: none; font-size: 12px; font-weight: 700; display: block; border-radius: 3px;}
#anasayfaKutular .kutu.kutu-3 ul li a:hover { background: #fff}

#anasayfaKutular .kutu.kutu-3 li span {float: left; width: 16px; height: 16px; margin: 7px 10px; background: url("../img/kutu3-sprite.png") no-repeat -99px -99px;}
#anasayfaKutular .kutu.kutu-3 li.l1 span {background-position: 0 0;} 
#anasayfaKutular .kutu.kutu-3 li.l1 a:hover span {background-position: 0 -16px;} 
#anasayfaKutular .kutu.kutu-3 li.l2 span {background-position: -16px 0;} 
#anasayfaKutular .kutu.kutu-3 li.l2 a:hover span {background-position: -16px -16px;} 
#anasayfaKutular .kutu.kutu-3 li.l3 span {background-position: -32px 0;}
#anasayfaKutular .kutu.kutu-3 li.l3 a:hover span {background-position: -32px -16px;}

.sub-title {width: 960px !important; padding: 0 0 6px; margin: 11px 0 10px; border-bottom: 2px solid #ddd; color: #393939; font-size: 16px; font-weight: 700;}
.subs {float: left; width: 100%; margin: 0; padding: 0; list-style: none;}
.subs li {float: left; width: 310px; margin: 0 15px 10px 0;}
.subs li a {padding: 10px; display: block; background: #888; color: #fff; font-size: 16px; text-decoration: none; border-radius: 3px;}
.subs li a:hover {background: #393939;}

/* ==========================================================================
Footer
========================================================================== */

#footer { width: 100%; height: 147px; float: left;}
#footer .footerUst { width: 100%; height: 30px; float: left; margin-top: 2px; padding: 20px 0 0 0; border-bottom: 1px solid #cacaca}

#footer .footerUst ul { margin:0; padding: 0; list-style: none; float: right; margin:0 10px 10px 0;}
#footer .footerUst ul li { float: left; margin-left:10px;}

#footer .footerUst .destekHatti { font-size: 13px; color: #000; float: left;}
#footer .footerUst .destekHatti span { font-weight: 700;}

/* Telif
   ============================== */
.telifHakki { float: left; font-size: 11px; color:#3b3b3b;}
.prativaLogo { float: right; margin:10px 0 0 0;}

.haberBilgiler {float: left; width: 280px; margin: 15px 20px 10px 10px;}
.haberBilgiler .bilgiler {width: 250px; padding: 5px 15px; margin: -15px 0 0; border-top: 1px solid #ccc; border-radius: 0 0 5px 5px; background: #eee; position: relative;}
.haberBilgiler .bilgiler .tarih {float: right; line-height: 20px; font-size: 11px; color: #888;}
.haberBilgiler .bilgiler .paylas {float: left; min-width: 80px; margin: 3px 0;}

/* ==========================================================================
Yardımcı Sınıflar
========================================================================== */

/* Clearfix
============================== */
.cf {*zoom: 1;}
.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}

/* ==========================================================================
Errors
========================================================================== */
.error {float: left; width: 920px; padding: 50px; text-align: center;}

/* Error 404
   ==================== */
.error.e-404 {color: #777; font-size: 11px;}
.error.e-404 h1 {margin: 0 0 20px; padding: 0; line-height: 1; color: #d42323; font-size: 56px; text-shadow: 0 0 10px rgba(0,0,0,0.3);}
.error.e-404 p {margin: 0; padding: 0;}
.error.e-404 a {color: #fff; font-size: 12px; text-decoration: none; margin-top: 25px; padding: 7px 15px; display: inline-block; background: #d42323; border: 3px solid #d42323; border-radius: 3px;}
.error.e-404 a:hover {color: #d42323; background: #fff;}

/* Error No Item
    ==================== */
.error.no-item {color: #fff; font-size: 14px; font-family: 'Open Sans', sans-serif; text-align: left; padding: 15px; margin: 20px 8px 20px 5px; background: #d44d42;}


table {width: 100%; border: 2px solid #ccc !important; box-shadow: 0 0 3px rgba(0,0,0,0.1);}
table tr {border-bottom: 1px solid #ccc;}
table td {border-right: 1px solid #ccc; padding: 8px 12px;}


.kategoriler {float: left; width: 980px; position: relative;}
.kategoriler .items {width: 980px; margin: 0; padding: 0; list-style: none;}
.kategoriler .items li {float: left; width: 220px; margin: 0 15px 15px 0;height: 250px;}
.kategoriler .items li img {width: 100%; display: block; border-radius: 3px 3px 0 0; box-shadow: 0 1px 3px rgba(0,0,0,0.4);}
.kategoriler .items li a {color: #fff; font-size: 14px; font-weight: 100; font-family: 'Open Sans', sans-serif; text-decoration: none; display: block; padding: 5px; border-radius: 4px; background: #888;}
.kategoriler .items li a:hover {color: #fff; background: #003866;}
.kategoriler .items li a .title {display: block; padding: 15px; text-align: center;}

#gallery-items {width: 100%; margin: 0; padding: 0; list-style: none;}
#gallery-items li {width: 100%; position: relative;}
#gallery-items li img,
#gallery-items li .video iframe {width: 100% !important;}
#gallery-items li .video {padding-bottom: 50px;}
#gallery-items li .caption {padding: 15px; color: #fff; font-size: 15px; font-family: 'Open Sans', sans-serif; background: #000; background: rgba(0,0,0,0.5); position: absolute; left: 0; bottom: 0; right: 0;}

.galeri {float: left; width: 100%; position: relative;}
.galeri .bx-prev,
.galeri .bx-next {width: 90px; height: 100%; display: none; position: absolute; top: 0; background: url('../img/gallery-arrows.png') no-repeat 0 0; text-indent: -99999px;}
.galeri .bx-prev {left: 0; background-position: 0 0;}
.galeri .bx-next {right: 0; background-position: -90px 0;}
.galeri:hover .bx-prev,
.galeri:hover .bx-next {display: block;}

.galeri .bx-pager {position: absolute; right: 10px; top: -25px;}
.galeri .bx-pager-item {float: left; width: 20px; height: 20px; margin-left: 5px;}
.galeri .bx-pager-item a {width: 20px; height: 20px; display: block; text-decoration: none; text-align: center; line-height: 20px; color: #fff; font-family: 'Open Sans', sans-serif; background: #1f1f1f; border-radius: 10px;}
.galeri .bx-pager-item a.active {background: #c00;}

.haber-gorsel {float: left; width: 970px; margin: -14px 5px 25px 3px; position: relative; z-index: 10;}
.haber-gorsel img {width: 100%; border-radius: 0 0 5px 5px;}
.haber-gorsel:before,
.haber-gorsel:after {z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg);}
.haber-gorsel:after{-webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto;}


.haber-bilgi {width: 970px; height: 16px; line-height: 16px; padding: 10px 0; margin: 15px 0 0 3px; position: relative; z-index: 10; background: #eee; border-radius: 4px;}
.haber-bilgi .tarih {float: left; margin-left: 10px; color: #555; font-size: 11px;}
.haber-bilgi .paylas {float: right; margin-right: 10px;}


.urun-resimler {float: left; width: 950px; padding: 4px; margin-right: 15px; border: 1px solid #ddd; border-radius: 4px;}
.urun-resimler .resim {float: left; width: 950px; padding-bottom: 4px; border-bottom: 1px solid #ddd;}
.urun-resimler .resim img {width: 100%; display: block;}
.urun-resimler ul {float: left; width: 100%; margin: 4px 0 0; padding: 0; list-style: none;}
.urun-resimler ul li {float: left; margin-right: 5px; opacity: 0.5; cursor: pointer;}
.urun-resimler ul li:hover {opacity: 0.75;}
.urun-resimler ul li.active {opacity: 1;}
.urun-resimler ul li img {height: 50px; border-radius: 2px; display: block;}

.urun-icerik {float: left; width: 535px;margin-top: 12px;}
.urun-icerik p {margin: 0 0 10px;}

.icerik {padding: 0 5px;}

.icerik .urunListe {margin: 5px 0 0 5px; padding: 0; list-style: none;}
.icerik .urunListe li {float: left; width: 220px; height: 226px; padding: 5px; border: 1px solid rgba(0,0,0,0.2); border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); position: relative; margin: 3px; text-align: center}
.icerik .urunListe li:hover {cursor: pointer; border-color: #6ab2c9}
.icerik .urunListe li img {width: 220px; height: 190px; display: block;}
.icerik .urunListe li .aciklama {width: 210px; height: 29px; padding: 10px 10px 30px 10px; position: absolute; left: 0; bottom: 0; background: #6ab2c9; color: #fff; font-size:11px;}
.icerik .urunListe li .aciklama b {font-family: 'Open Sans Condensed', sans-serif; font-size: 11px;}
.icerik .urunListe li a { width: 220px; height: 190px; position: absolute; left: 0; top: 0; text-indent: -999em; display: block;}

.icerik h2 { width: 100%; height: 35px; line-height: 35px; float: left;}