/* Eric Meyer's Reset Reloaded */
/* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

body {
  background: url(../images/body-bg.png) #050505 repeat-y center;
  font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
  font-size: 76%;
  }

/* General
--------------------------------------------------*/

p { font-size: 1em; }

a { color: #cc1414; text-decoration: none; }

a:hover { text-decoration: underline; }

img { vertical-align: bottom; }

.clearleft { clear: left; }
.clearright { clear: right; }

.image { text-indent: -999em; }

div.trans { background: url(../images/trans-bg.png) repeat-y; }

/* Layout
--------------------------------------------------*/

#wrapper { 
  margin: auto; 
  width: 880px; 
  }
  
  
/* Header
--------------------------------------------------*/  
  
#header {
  height: 180px;
  width: 880px;
  }

#header h1 {
  background: url(../images/logo.png) no-repeat 40px 19px;
  float: left;
  height: 180px;
  text-indent: -999em;
  width: 670px;
  }
  
#social { position: absolute; left: -999em; top: -999em; }
  
#header ul {
  float: left;
  margin: 49px 0 0;
  width: 210px;
  }

#header li {
  
  }

#header li a { 
  background: url(../images/navigation.png) no-repeat; 
  display: block;
  height: 27px;
  text-indent: -999em;
  width: 210px;
  }
#header li a#nav-ref { background-position: 0 -5px; }
#header li a#nav-about { background-position: 0 -32px; }
#header li a#nav-contact { background-position: 0 -59px; }
#header li a#nav-ref:hover { background-position: -210px -5px; }
#header li a#nav-about:hover { background-position: -210px -32px; }
#header li a#nav-contact:hover { background-position: -210px -59px; }


/* Welcome
--------------------------------------------------*/  

#welcome {
  margin: 20px 0;
  height: 250px;
  width: 880px;
  }

#hi {
  float: left;
  height: 210px;
  margin-right: 20px;
  padding: 20px;
  width: 390px;
  }

#hi h2 { font-size: 1.7em; }

#hi p { 
  font-size: 1.4em; 
  line-height: 1.2;
  padding-top: 10px; 
  }

#latest {
  float: left;
  width: 430px;
  }

#latest img { margin-left: 25px; }

#latest h2 {
  background: url(../images/latest-h2.png) no-repeat;
  float: left;
  height: 75px;
  width: 208px;
  }

#latest a.text {
  background: url(../images/latest-link.png) no-repeat;
  display: block;
  float: left;
  height: 75px;
  text-indent: -999em;
  width: 222px;  
  }


/* Coming Soon
--------------------------------------------------*/  

#coming-soon {
  clear: left;
  margin-bottom: 20px;
  width: 880px;
  }
  
#coming-soon h2 {
  background: url(../images/coming-soon.png) no-repeat 20px 19px;
  height: 70px;
  }
  

/* Our Work
--------------------------------------------------*/  

#our-work {
  clear: left;
  margin-bottom: 20px;
  width: 880px;
  }
  
#our-work h2 {
  background: url(../images/our-work.png) no-repeat 20px 19px;
  height: 70px;
  }
  
div.ref-box {
  float: left;
  margin-left: 15px;
  padding-bottom: 15px;
  text-align: center;
  width: 273px;
  }
  
div.ref-box a {
  display: inline-block;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.4em;
  padding: 5px 0;
  }  


/* About Us
--------------------------------------------------*/  

#about-us {
  clear: left;
  margin-bottom: 20px;
  padding-bottom: 10px;
  width: 880px;
  }

#about-us h2 {
  background: url(../images/about-us.png) no-repeat 20px 19px;
  height: 70px;
  }

div.about-box {
  float: left;
  margin-right: 20px;
  width: 280px;
  }

div.about-box h3 {
  padding: 20px 20px;
  }
  
div.about-box p {
  font-size: 1.2em;
  line-height: 1.2;
  padding: 0 20px 10px; 
  }
  
div.about-box p.job-title {
  font-size: 1.4em;
  font-weight: 600;
  }

div.onur {}

div.onur h3 {
  background: url(../images/onur-title.png) no-repeat 20px 20px;
  height: 23px;
  }

div.arzan {}

div.arzan h3 {
  background: url(../images/arzan-title.png) no-repeat 20px 20px;
  height: 23px;
  }

div.okan { 
  margin-right: 0; 
  }

div.okan h3 {   
  background: url(../images/okan-title.png) no-repeat 20px 20px;
  height: 23px;
  }


/* Contact
--------------------------------------------------*/  

#contact {

  }

#address, #form {
  float: left;
  margin-right: 20px;
  padding: 20px 40px;
  width: 350px;
  }

#address h2 {
  background: url(../images/address.png) no-repeat 0 5px;
  height: 40px;
  }

#address p {
  font-size: 1.6em;
  line-height: 1.4;
  padding-top: 20px;
  }
  
#address p span { 
  color: #666; 
  display: inline-block;
  width: 100px; 
  }

#form { 
  background-position: -450px 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  margin-right: 0;  
  }

#form h2 {
  background: url(../images/form.png) no-repeat;
  height: 50px;
  }

#form label {
  color: #666;
  display: inline-block;
  font-size: 1.2em;
  padding: 5px 0;
  }

#form input {
  height: 20px;
  width: 340px;
  }
  
#form .buton {
  height: 31px;
  width: 140px;
}
  
#form button {
  background: url(../images/button.png) no-repeat;
  border: 0;
  float: right;
  height: 31px;
  margin: 20px 0 0;
  text-indent: -999em;
  width: 140px;
  }

/* Footer
--------------------------------------------------*/  

#footer-wrap {
  background: url(../images/footer-bg.png) #050505 no-repeat top center;
  width: 100%
  }

#footer {
  margin: 0 auto;
  padding: 40px 0 200px;
  width: 880px;
  }

#footer ul {
  color: #fff;
  float: right;
  }

#footer li {
  padding-bottom: 5px;
  }

#footer li span {
  color: #000;
  }