@charset "UTF-8";
/* This CSS Document is written by Eser Kalafatoglu for Dereli Dis Tic. Ltd. Sti. 
Contact info: eserkalafatoglu@gmail.com */

/*      ==========       CSS RESET      ==========        */

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, big, cite, code,del, dfn, em, img, ins, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, details, embed, figure, figcaption, footer, header, hgroup, nav, output, ruby, section, summary, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}

/* ==========  HTML5 RESET for OLDER BROWSERS ==========  */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
	
/*   ==========   ELEMENTS and LAYOUT  ==========   */

	
html{background-color:WhiteSmoke;font-family:Ubuntu;}
#container{width: 960px;margin:0 auto;}
#ccontainer{position:relative;width: 960px;height:720px;margin:0 auto;background-image:url(images/map2.png);clear:both;background-repeat:no-repeat;}
#contactyazi{width: 366px; height:390px;top:72px;left:68px;position:absolute;background-image:url(images/dtmapicon.png);background-position:bottom;background-repeat:no-repeat;}
#headcontainer{width: 984px;margin:0 auto;}
#logo {height:100px;width: 960px;margin-bottom:1px;float:left;}
nav{height: 24px;background-color:#666;width: 728px ;float:left;position: relative;z-index: 1;-webkit-box-shadow: 0 3px 3px 0 #333;-moz-box-shadow:0 3px 3px 0 #333;box-shadow:0 3px 3px 0 #333;}
#social{display:block;height: 24px;width: 247px;float:right;background-color:#ccc;box-shadow: 0 3px 3px 0 #333;padding-left:4px;padding-right:5px;position: relative;z-index: 1;}
#welcome {float: left;width: 224px ;height: 220px;background-color:white;padding: 8px;margin-bottom: 4px;}
#contactus {float: left;width: 195px ;height: 200px;margin-bottom: 4px;padding-top: 36px;padding-left:45px;background-color:#0080ff;}

#boximageleft {float: left;width: 236px;height: 240px;margin-right: 4px;}
.boximagemiddle {float: left;width: 236px ;height: 240px;margin-right: 4px;}
#boximageright {float: left;width: 195px ;height: 204px;padding-top: 36px;padding-left:45px;background-color:Red;}
#boximageright2 {float: left;width: 240px ;height: 240px;background-color:white;}
.boxtext, #boxtextsh { float: left;width: 220px ;height: 224px;background-color:white;margin-right: 4px;padding: 8px; position:relative}

footer {clear:both;height: 16px;text-align:center;padding-top: 4px;margin:0 auto;width:984px;background-color:#666;box-shadow: 0 3px 3px 0 #333;}

p.clear {clear:both;height: 20px;padding:0;margin:0;}
p.clear2 {clear:both;height: 18px;padding:0;margin:0;}

.right{position:relative;float:left;width: 716px;height: 476px;padding:0;background-color:white;margin:0 0 36px 4px;}

#lastentry{margin-bottom:0px}

header{position:absolute;top:422px;width:464px;height:30px;padding-left:16px;color:white;background-color:#090;opacity:0.9;}
header.right{position:absolute;top:422px;left:232px;width:464px;height:30px;padding-left:16px;color:white;background-color:#090;opacity:0.9;}

section{position:absolute;top:430px;left:80px;width:160px;height:22px;border-bottom:1px solid #666}
section.left{position:absolute;top:430px;left:0px;width:160px;height:22px;border-bottom:1px solid #666;text-align:right}

iframe, figure {position:relative;float:left;width: 716px;height:476px;padding:0;margin:0 4px 36px 0;background-color:white;}

.blog {position:relative;float:left;width:224px;height:460px;background-color:white;background-image:url(images/datesquare.png), url(images/dtmapicon.png); background-position:left top, 214px 410px;
background-size:auto, 8%;background-repeat: no-repeat,no-repeat;padding:8px;margin-bottom:36px}
.blogleft {position:relative;float:left;width:224px;height:460px;background-color:white;background-image:url(images/datesquare.png), url(images/dtmapicon.png); background-position:left top, 6px 410px;
background-size:auto, 8%;background-repeat: no-repeat,no-repeat;padding:8px;margin-bottom:36px}

article.yazilar, article.urunler {float:left;width:700px;background-color:#FFF;padding:8px;margin-right:4px;}
article.urunler {height:963px}article.yazilar{height:704px}

/*     ==========     TYPOGRAPHY     ==========    */

a{text-decoration:none; color:#333}
a:visited{text-decoration:none; color:#666}
a:hover{color:#20AE60}
a:active{text-decoration:none}

a.empty{color:white}
a.empty:hover{color:#666}

h1,h2,h3 {font-weight: 500;color:#333;}

h1 {font-size: 150%;}
h2 {font-size: 125%;}
h3 {font-size: 120%;}	
h4 {font-size: 100%;font-weight: 400;color:#333; line-height:1.2;}
h5 {font-size: 70%;font-weight: 400;color:white;}
h6 {font-size: 72%;font-weight:300;color:#333;line-height:1.2}

p {line-height:1.2;color:#333;font-weight:300}

.poscolor {color:white;text-align:none;padding:none;}
h2.center {text-align: center;}
header h1{font-size: 160%;font-weight: 400;color:#fff;}

.blog h1, .blogleft h1  {font-size: 200%;font-weight:300;color:white; float:left;margin: 2px 10px 0 0;}
.blog h2, .blogleft h2 {font-size: 180%;font-weight:300;color:#666; float:left;margin:4px 0 0 0;}

section h6{font-size: 86%;font-weight:400;color:#666;}
#contactyazi h1 {font-size:400%;font-weight:700c;olor:#666;float:left;}
.transcontent, .matcontent, .beyazcontent, .porlizecontent, .metalizecontent{font-size:75%;font-weight:500;text-align:center;}

/*      ========== LINKS and NAVIGATION    ==========         */
ul.menu {text-align: left;display: inline;margin: 0;padding-left:20px;list-style: none;text-decoration:none;}
ul.menu li {display: inline-block;margin:0;position: relative;font-size:90%;color:white;font-weight:400;padding: 5px 36px;cursor: pointer;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}
ul.menu li:hover {background-color:#ccc;color:#666;}
ul.menu li ul {padding: 0;position: absolute;top: 24px;left: 0;width: 200px;display: none;opacity: 0;border-top:1px solid #666;visibility: hidden;z-index:5;}
ul.menu li ul li {border-bottom:1px solid #666;background-color: #ccc;display: block;color: #666;}
ul.menu li ul li:hover {background: #666;color: white;}
ul.menu li:hover ul {display: block;opacity: 1;visibility: visible;}
ul.menu a {color:white}
ul.menu a:hover {color:#666}
a img:hover {opacity: 0.8;}

/* ========== FRAGMENTS and NAVIGATION   ==========         */

#totop, #tonext  {width:60px; height:60px;float:left; color:white;padding:0;-webkit-box-shadow: 6px 0px 7px -4px rgba(50, 50, 50, 0.87);
-moz-box-shadow:4px 0px 3px -2px rgba(50, 50, 50, 0.8);box-shadow:4px 0px 3px -2px rgba(50, 50, 50, 0.8);vertical-align:middle;}
#totop {margin: 336px -60px 0 0;background:url(images/yukari.png) no-repeat center #999;}
#tonext {margin: 406px -60px 0 0;background:url(images/asagi.png) no-repeat center #999;}

#totop:hover, #tonext:hover  {width:63px; height:60px;float:left; color:white;padding:0;vertical-align:middle;box-shadow:none;}
#totop:hover{ margin: 336px -63px 0 0;background:url(images/yukarihv.png) no-repeat center #999;background-size:34px 46px}
#tonext:hover {margin: 406px -63px 0 0;background:url(images/asagihv.png) no-repeat center #999;background-size:34px 46px}


/*   ==========  CSS ANIMATION TRANSITION AND TRANSFORMATION   ==========     */

.slideshow {position:relative;float:left;width:716px;height:476px;padding:0;margin:0 4px 4px 0;}

.miniss {float:left;position:relative;width:240px;height:256px;padding:0;margin-top:4px;background-color:white;}
.miniss img { position: absolute;left:0; top:0; }

.arrow {position:absolute;width:30px;height:30px;top:192px;left:192px;-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s;-o-transition-duration: 0.8s;transition-duration: 0.8s;-webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform;-o-transition-property: -o-transform;transition-property: transform;overflow:hidden;}
.arrow:hover{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);} 

.fbook {width: 24px; height:24px; display:block;float:right;margin-left:8px;background-image: url('images/fbbw.png');} 
.fbook:hover {background-image: url('images/fb.png'); }

.linkedn {width: 24px; height:24px; float:right;margin-left:8px;display:block;margin-right:20px;background-image: url('images/linkedinbw.png');} 
.linkedn:hover {background-image: url('images/linkedin.png');}

.twitter { width: 24px; height:24px; float:right;margin-left:8px;display:block; background-image: url('images/twitterbw.png'); } 
.twitter:hover {background-image: url('images/twitter.png');}

/*   ==========        JQUERY TABS       ==========   */

.tabs-menu {height: 28px;float: left;clear: both;}
.tabs-menu li {height: 28px;float: left;margin-right: 2px;background-color:#889DAE;width:120px;color:white;font-size:80%;font-weight:400;text-align:center;line-height:24px;}

.tabs-menu li.current {position:relative;background-color:#889DAE;z-index: 5;}
.tabs-menu li.current2 {position:relative;background-color:#DEB925;z-index: 5;}
.tabs-menu li.current3 {position:relative;background-color:#BFC974;z-index: 5;}
.tabs-menu li.current4 {position:relative;background-color:#97B973;z-index: 5;}
.tabs-menu li.current5 {position:relative;background-color:#B2B2B2;z-index: 5;}

.tabs-menu li a {padding: 10px;color: #fff;text-decoration: none; }
.tabs-menu .current a {color:  #fff;}
.tab {float: left;width: auto;}
.tab-content {width:702px;display: none;}
#tab-1 {display: block;}
 
 /*   ==========        TABLES           ==========  */
 table {width:100%;float:left;}
td { vertical-align:middle;padding-left: 4px;height:56px;border-top:1px solid white;line-height:1.3;}
th {vertical-align:middle;padding:4px;height:48px;color:white;font-size:80%;font-weight:500;}

tr.trans {background-color:#889DAE;}
tr.transcontent {background-color:#C4CFD7;}
tr.mat {background-color:#DEB925;}
tr.matcontent {background-color:#E4D8A8;}
tr.beyaz {background-color:#BFC974;}
tr.beyazcontent {background-color:#D8E09C;}
tr.porlize {background-color:#97B973;}
tr.porlizecontent {background-color:#C4DCAC;}
tr.metalize {background-color:#B2B2B2;}
tr.metalizecontent {background-color:#C4C4C4;}

td.left, th.left {text-align:left;}

#bluespace{height:104px;width:100%;clear:both;margin:0;padding:0;border-top:1px solid white;background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #C4CFD7),color-stop(1, #FFFFFF));background-image: -o-linear-gradient(bottom, #C4CFD7 0%, #FFFFFF 100%);background-image: -moz-linear-gradient(bottom, #C4CFD7 0%, #FFFFFF 100%);background-image: -webkit-linear-gradient(bottom, #C4CFD7 0%, #FFFFFF 100%);background-image: -ms-linear-gradient(bottom, #C4CFD7 0%, #FFFFFF 100%);background-image: linear-gradient(to bottom, #C4CFD7 0%, #FFFFFF 100%);}
#yellowspace{height:342px;width:100%;clear:both;margin:0;padding:0;border-top:1px solid white;background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #E4D8A8),color-stop(1, #FFFFFF));
background-image: -o-linear-gradient(bottom, #E4D8A8 0%, #FFFFFF 100%);background-image: -moz-linear-gradient(bottom, #E4D8A8 0%, #FFFFFF 100%);background-image: -webkit-linear-gradient(bottom, #E4D8A8 0%, #FFFFFF 100%);background-image: -ms-linear-gradient(bottom, #E4D8A8 0%, #FFFFFF 100%);background-image: linear-gradient(to bottom, #E4D8A8 0%, #FFFFFF 100%);}
#lgreenspace{height:399px;width:100%;clear:both;margin:0;padding:0;border-top:1px solid white;background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #D8E09C),color-stop(1, #FFFFFF));
background-image: -o-linear-gradient(bottom, #D8E09C 0%, #FFFFFF 100%);background-image: -moz-linear-gradient(bottom, #D8E09C 0%, #FFFFFF 100%);background-image: -webkit-linear-gradient(bottom, #D8E09C 0%, #FFFFFF 100%);background-image: -ms-linear-gradient(bottom, #D8E09C 0%, #FFFFFF 100%);background-image: linear-gradient(to bottom, #D8E09C 0%, #FFFFFF 100%);}
#greenspace{height:114px;width:100%;clear:both;margin:0;padding:0;border-top:1px solid white;background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #C4DCAC),color-stop(1, #FFFFFF));
background-image: -o-linear-gradient(bottom, #C4DCAC 0%, #FFFFFF 100%);background-image: -moz-linear-gradient(bottom, #C4DCAC 0%, #FFFFFF 100%);background-image: -webkit-linear-gradient(bottom, #C4DCAC 0%, #FFFFFF 100%);background-image: -ms-linear-gradient(bottom, #C4DCAC 0%, #FFFFFF 100%);background-image: linear-gradient(to bottom, #C4DCAC 0%, #FFFFFF 100%);}
#bluespace2{height:313px;width:100%;clear:both;margin:0;padding:0;border-top:1px solid white;background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #C4CFD7),color-stop(1, #FFFFFF));
background-image: -o-linear-gradient(bottom, #C4CFD7 0%, #FFFFFF 100%);background-image: -moz-linear-gradient(bottom, #C4CFD7 0%, #FFFFFF 100%);background-image: -webkit-linear-gradient(bottom, #C4CFD7 0%, #FFFFFF 100%);background-image: -ms-linear-gradient(bottom, #C4CFD7 0%, #FFFFFF 100%);background-image: linear-gradient(to bottom, #C4CFD7 0%, #FFFFFF 100%);}
#yellowspace2{height:142px;width:100%;clear:both;margin:0;padding:0;border-top:1px solid white;background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #E4D8A8),color-stop(1, #FFFFFF));
background-image: -o-linear-gradient(bottom, #E4D8A8 0%, #FFFFFF 100%);background-image: -moz-linear-gradient(bottom, #E4D8A8 0%, #FFFFFF 100%);background-image: -webkit-linear-gradient(bottom, #E4D8A8 0%, #FFFFFF 100%);background-image: -ms-linear-gradient(bottom, #E4D8A8 0%, #FFFFFF 100%);background-image: linear-gradient(to bottom, #E4D8A8 0%, #FFFFFF 100%);}
#lgreenspace2{height:313px;width:100%;clear:both;margin:0;padding:0;border-top:1px solid white;background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #D8E09C),color-stop(1, #FFFFFF));background-image: -o-linear-gradient(bottom, #D8E09C 0%, #FFFFFF 100%);background-image: -moz-linear-gradient(bottom, #D8E09C 0%, #FFFFFF 100%);background-image: -webkit-linear-gradient(bottom, #D8E09C 0%, #FFFFFF 100%);background-image: -ms-linear-gradient(bottom, #D8E09C 0%, #FFFFFF 100%);background-image: linear-gradient(to bottom, #D8E09C 0%, #FFFFFF 100%);}
#greenspace2{height:545px;width:100%;clear:both;margin:0;padding:0;border-top:1px solid white;background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #C4DCAC),color-stop(1, #FFFFFF));background-image: -o-linear-gradient(bottom, #C4DCAC 0%, #FFFFFF 100%);background-image: -moz-linear-gradient(bottom, #C4DCAC 0%, #FFFFFF 100%);background-image: -webkit-linear-gradient(bottom, #C4DCAC 0%, #FFFFFF 100%);background-image: -ms-linear-gradient(bottom, #C4DCAC 0%, #FFFFFF 100%);background-image: linear-gradient(to bottom, #C4DCAC 0%, #FFFFFF 100%);}
#bluespace3{height:399px;width:100%;clear:both;margin:0;padding:0;border-top:1px solid white;background-image: -webkit-gradient(linear,eft top,left bottom,color-stop(0, #C4CFD7),color-stop(1, #FFFFFF));background-image:-o-linear-gradient(bottom, #C4CFD7 0%, #FFFFFF 100%);background-image: -moz-linear-gradient(bottom, #C4CFD7 0%, #FFFFFF 100%);background-image: -webkit-linear-gradient(bottom, #C4CFD7 0%, #FFFFFF 100%);background-image:-ms-linear-gradient(bottom, #C4CFD7 0%, #FFFFFF 100%);background-image: linear-gradient(to bottom, #C4CFD7 0%, #FFFFFF 100%);}
#grayspace{height:12px;width:100%;clear:both;margin:0;padding:0;border-top:1px solid white;background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #C4C4C4),color-stop(1, #FFFFFF));background-image: -o-linear-gradient(bottom, #C4C4C4 0%, #FFFFFF 100%);background-image: -moz-linear-gradient(bottom, #C4C4C4 0%, #FFFFFF 100%);background-image: -webkit-linear-gradient(bottom, #C4C4C4 0%, #FFFFFF 100%);background-image: -ms-linear-gradient(bottom, #C4C4C4 0%, #FFFFFF 100%);background-image: linear-gradient(to bottom, #C4C4C4 0%, #FFFFFF 100%);}

/*    ==========         FORMS        ==========       */
form {width: 278px; height:548px;position:absolute;top:72px;left:568px;background-color:white; padding:28px;}
input {width: 272px; height:36px;margin-bottom:16px; font-family:Ubuntu;font-weight:400;font-size:100%;color:#666;border:1px solid #ccc}
input[type="submit"] {width: 276px; height:40px;color:white;background-color:#ccc;cursor:pointer;border-bottom:2px solid #999;border-top:2px solid #ccc;}
input[type="submit"]:hover {width: 276px; height:40px;color:white;border-bottom:0px;background-color:#ccc;border-top:solid 2px #FFF;border-left:none; border-right:none}
textarea {width: 270px; height:200px;margin-bottom:16px;border:1px solid #ccc;font-family:Ubuntu;font-weight:400;font-size:100%;color:#666;}

/*    ==========         EXTRA SHADOW       ==========       */
#boxtextsh, #boximageleft, .boximagemiddle, figure, header, article.blog, article.yazilar, article.urunler, #ccontainer, form, .slideshow, figure.right, article.blogleft, iframe, iframe.right{box-shadow:0px 0px 3px 0px rgba(50, 50, 50, 0.85);-webkit-box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.85);-moz-box-shadow:0px 0px 3px 0px rgba(50, 50, 50, 0.85);}
.boxtext, #welcome, #contactus, #boximageright, #boximageright2, .miniss{-webkit-box-shadow: 1px 0px 4px -2px rgba(50, 50, 50, 0.75);-moz-box-shadow:1px 0px 4px -2px rgba(50, 50, 50, 0.75);box-shadow:1px 0px 4px -2px rgba(50, 50, 50, 0.75);}