@primary: #222;
@secondary: blue;
@bg: #889;

.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

.box-shadow (@style : 0 0 10px 0, @c : #AAAAAA) {
    box-shadow:         @style @c;
    -webkit-box-shadow: @style @c;
    -moz-box-shadow:    @style @c;
}

.transition(@speed: 0.3s) {
    -webkit-transition: all @speed ease-in-out;
    -moz-transition: all @speed ease-in-out;
    -o-transition: all @speed ease-in-out;
    -ms-transition: all @speed ease-in-out;
    transition: all @speed ease-in-out;
}

.box {
    .border-radius;
    border: 1px solid @primary;
    background: @bg;
    padding: 5px;
}

/* general styles */


body {
background:url(https://flotcam.com.tr/images/bgs.png) repeat-y center top;
font-family: Verdana,arial,sans-serif;
width:900px;
color:#333;
text-align:center;
margin:50px 0px; 
padding:0px;
max-width: 100%;
overflow-x: hidden;
}



img{
border-style: none;
border-width: none;
}
 
#wrap {
width:850px;
background-color:#fff;
margin:0 auto;
float: right;
position:relative;
margin-left:300px;
}
 
#menu {
 	width:585px;  
	height:auto;
	margin-right: auto;
 	margin-left: 100px;
 	padding: 20px;
 	margin-top: 2px;
	margin-bottom: 25px;
	z-index: 2;  
}

#header-blocks {
  float: none; 
  text-align:right;
  width: 850px;
  padding: 20px 0 20px 20px;
}

#header-blocks .block {
  margin-bottom: 5px;
}

ul#topnav {
    margin: 0px 0 0 0px;
    padding: 0;
	list-style: none;
	float: left;
	width: 585px;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
}
ul#topnav a {
	float: left;
	display: block;
	height: 67px;
	text-indent: -99999px;
	background-position: left top;
}
ul#topnav a:hover {
	background-position: left -67px;
}
#hakkinda li.hakkinda a,
#camurunlerimiz li.camurunlerimiz a,
#referansprojelerimiz li.referansprojelerimiz a,
#iletisim li.iletisim a,{
	background-position: left bottom;
}
ul#topnav li.hakkinda a {
	background-image: url(https://flotcam.com.tr/images/hakkinda.png);
	width: 139px;
}
ul#topnav li.camurunlerimiz a {
	background-image: url(https://flotcam.com.tr/images/camurunlerimiz.png);
	width: 135px;
}
ul#topnav li.referansprojelerimiz a {
	background-image: url(https://flotcam.com.tr/images/referansprojelerimiz.png);
	width: 134px;
}
ul#topnav li.iletisim a {
	background-image: url(https://flotcam.com.tr/images/iletisim.png);
	width: 144px;
}


#container {
  background: #fff;
  margin-left: auto;
	margin-right: 12px;
	width:850px;
	position:relative;
}

.left{
   overflow: hidden;
	position:absolute;
  width:250px;  
	height:390px;
	margin-left: 0px;
 	margin-right: 5px;
 	padding: 0;
 	margin-top: 0px;
	float:left;
	z-index:4;
}

.right{
   width:800px;
   float: left;
	margin-right: auto;
	margin-left: 110px;
	margin-top: 20px;  
}

.right2{
   width:800px;
   float: left;
	margin-right: auto;
	margin-left: 0px;
	margin-top: 20px;  
}


#content {
  clear: both;
  border-collapse:separate;
  font-size: 14px;
  margin-left:-20px;
  float:left;
}

.center {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
width:900px;
text-align:center;
padding:0px;
} 


.wrapperinner{
width:850px;
background-color:#ffffff;
}

#main, #sidebar {
    .box;
}

table {

border-collapse:separate;
}

/* general styles */


h1 {
  font-size: 1.4em;
  
}

h2 {
  font-size: 1.0em;
 
}

a {
    color: @secondary;
    &:hover {
        .transition;
        color: lighten(@secondary, 10%);
    }
}

.clear {
  clear: both;
}

#footer {
    background: #fff;
    text-align: center;
	 font-size: 11px;
	 display:inline-block;
    nav {
        .box;
        a {
          border-left: 1px solid @primary;
          padding: 0 10px;
          line-height: 100%;
            &.first-child {
              border-left: none;
            }
#wrapper #container #footer {
  float: none;
  clear: both;
  text-align: center;
  margin: 4em 0 -3em;
  color: #898989;
}       
       }
    }
}