/* Global */

* {
  margin: 0;
  padding: 0;
}

body {
  font: 12px/130%  Verdana, sans-serif;
  color: #737373;
  background: url(images/bg-body.png) repeat-x;

}

/**
 * Links
 */

a:link, a:visited, a:active {
  color: #737373;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/**
 * Fonts
 */

h2{
  font-weight: normal;
  font-size: 160%;
  color: #474747;
  margin-bottom: 20px;
}

h3{
  font-weight:bold;
  font-size: 125%;
  margin-bottom: 8px;
}

h4{
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 100%;
}

.d{
  color: #474747;
}


p {
  margin: 0.2em 0 1em;
    text-align: justify;
}

table{
  width: 100%;
}




/**
 * Other
 */

img{
  border:none;
}

img.page-img{
  float: left;
  margin-right:30px;
}

li{
  list-style: none;
}

.clear{
  clear: both;
}


/*************************************************************
 *                        Layout
 ************************************************************/

#wrapper{
  width:950px;
  padding: 0 25px;
  margin: 0 auto;
}

/*Header*/

#header {
  position: relative;
  height: 236px;
  background: url(images/bg-page-info.png) repeat-x 0 bottom;
  font-family: Arial;
}

#header .logo-wrap{
  height: 168px;
  width: 352px;
  background: url(images/logo-reflection.jpg) no-repeat scroll 0 bottom;
  padding-top: 30px;
  padding-left: 10px;
}

#header .left-page-info{
  position: absolute;
  height: 36px;
  color: #cecece;
  left: -1px;
  bottom:0;
  background: url(images/bg-body.png) repeat-x scroll 0 -200px;
  line-height: 3;
  padding-right: 25px;
  padding-left:45px;
}

#header .right-page-info{
	background:transparent url(images/bg-body.png) repeat-x scroll 0 -200px;
	color:#CECECE;
	height:26px;
	padding: 10px 35px 0 25px;
	position:absolute;
	right:-1px; 
	bottom:0;
}

#header .right-page-info a img{
	margin-bottom:-3px;
}

#header .left-page-info span{
  display:block;
  height:36px;
  position:absolute;
  right:-1px;
  top:0;
  width:14px;
  background: url(images/corners.png) no-repeat scroll -14px 0;
}

#header .right-page-info span.lf{
  display:block;
  height:36px;
  position:absolute;
  left:0;
  top:0;
  width:14px;
  background: url(images/corners.png) no-repeat;
}

.primary-links{
  position:absolute;
  right:0;
  top:5px;
  background: url(images/bg-primary-menu.jpg) no-repeat;
  padding: 30px 10px 55px 30px;
}

.primary-links ul{
  float: left;
}


.primary-links ul li{
  float: left;
  height: 99px;
  width: 91px;
  /*background: url(images/bg-primary-links.jpg) no-repeat;*/
}

.primary-links ul li {
  height:98px;
  background-position:48% 18px;
  background-repeat: no-repeat;
  background-color: transparent;
}

.primary-links ul li.home       { background-image:url(images/home.png);}
.primary-links ul li.iphone     { background-image: url(images/iphone.png);}
.primary-links ul li.web        { background-image:url(images/web.png);}
.primary-links ul li.portfolio  { background-image:url(images/portfolio.png);}
.primary-links ul li.services   { background-image:url(images/services.png);}
.primary-links ul li.contact    { background-image:url(images/contact.png);}

.primary-links ul li  a{
  display:block;
  height:98px;
  background-position:48% 92px;
  background-repeat: no-repeat;
  background-color: transparent;

}

.primary-links ul li  a:hover, .primary-links ul li  a.active{
  background-image:url(images/bg-active-primary-links.png);
}

/*Content*/

#content-wrap{
  padding-top:20px;
}

#content-wrap .content{
  width: 605px;
  float: left;
  position: relative;
}

#content-wrap .content2{
  width: 605px;
  float: left;
  position: relative;
}

#content-wrap .sidebar{
  width: 345px;
  float:right;
  background: url(images/bg-sidebar.png) no-repeat;
  position: relative;
}

#content-wrap .sidebar .sub{
  padding: 20px 0 20px 35px;

}


#content-wrap .content{
  background: url(images/bg-content.png) no-repeat;

}

#content-wrap .content .sub{
  height: 521px;
  *height: 538px;
  padding: 35px 35px 15px 65px;
}


#content-wrap .content2{
  background: url(images/bg-content2.png) no-repeat;

}

#content-wrap .content2 .sub{
  height: 721px;
  padding: 35px 35px 15px 65px;
}

/*Sidebar*/

.block{
  width: 262px;
  background: url(images/bg-block.png) repeat-x scroll 0 bottom;
  position: relative;
}

.sidebar .block{
  width: 304px;
}

.block li{
  border-left: 1px solid #474747;
  border-right: 1px solid #474747;
  background: transparent url(images/check.png) no-repeat scroll 10px 4px;
  padding:4px 0 4px 40px;
  font-weight: bold;
  color: #474747;
}

.block li.first{
  background-position:10px 15px;
  padding-top:15px;
}

.block li.img{
  background: none;
  padding: 0;
}

.block li.img img{
  position:absolute;
  right:15px;
  top:20px;
}

.block li.title{
  background: url(images/block-title.png) repeat-x;
  height: 38px;
  border: none;
  padding: 0;
  position: relative;
  top: 2px;
}

.block li.title div{
  position: absolute;
  width: 6px;
  height: 36px;
  background-image: url(images/block-title-corners.png);
  background-repeat: no-repeat;
  top: 0;
}

.block li.title div.left{
  left: 0;
}

.block li.title div.right{
  right: 0;
  background-position: right 0;
}

.block li.bottom{
  height: 15px;
  border: none;
  padding: 0;
  margin-top:-1px;
  position: relative;
  background: none;
  border-left: 1px solid #474747;
  border-right: 1px solid #474747;
  border-bottom: 1px solid #474747;

}

.block li.bottom div{
  position: absolute;
  width: 7px;
  height: 7px;
  background-image: url(images/block-bottom-corners.png);
  background-repeat: no-repeat;
  bottom: -1px;
  font-size: 0;
}

*html .block li.bottom div{
  bottom: -2px;
}


.block li.bottom div.left{
  left: -1px;
}

.block li.bottom div.right{
  right: -1px;
  background-position: -7px 0;
}

.block li.title span{
  height: 38px;
  display: block;
}

.block li.title .programming  { background: url(images/programming.png) no-repeat scroll 15px 8px;}
.block li.title .advantages   { background: url(images/advantages.png) no-repeat scroll 15px 8px;}
.block li.title .technologies { background: url(images/technologies.png) no-repeat scroll 15px 8px;}
.block li.title .solutions    { background: url(images/solutions.png) no-repeat scroll 15px 8px;}
.block li.title .desigin      { background: url(images/desigin.png) no-repeat scroll 15px 8px;}

span.stroke{
  display: block;
  height: 40px;
  background: url(images/stroke.png) no-repeat scroll 50% 50%;
}
span.block-reflection{
  display: block;
  height: 40px;
  background: url(images/block-reflection.png) no-repeat;
  margin-top: 8px;
}

span.block-reflection.sm{
  background-position: 0 -40px;
}


/*Footer*/

#footer-wrap{
  height: 36px;
  background: url(images/bg-page-info.png) repeat-x;
}

#footer-wrap .footer{
  max-width:904px;
  color: #9c9c9c;
  margin: 0 auto;
margin-top:10px;
  padding: 10px 60px;
  font-size: 94%;
  font-weight: bold;
}


/*************************************************************
 *                        Pages
 ************************************************************/

/*main page*/

body.main {background: url(images/bg-body-main.png) repeat-x;}

body.main #content-wrap {
  padding:0 20px 0 33px;
  background: url(images/bg-content_.jpg) no-repeat scroll 0 120px;
}

#top-block{
  height: 265px;
  background: url(images/reflect.png) repeat-x scroll 0 168px;
  position: relative;
  font-size: 11px;
  font-family: Tahoma;
  color:#b6b6b6;
  margin:0 43px;
}

#top-block p{
   margin: 0;
}

.recent-clients li{
 margin-top:25px;
 float: left;
 width: 185px;
 height:220px;
 position: relative;
}

.recent-clients li.second,
.recent-clients li.third,
.recent-clients li.fourth {
  padding-left: 50px;
  background: url(images/sep.png) no-repeat scroll 0 5px;
}

.recent-clients li.fourth{
  width: 158px;
}

.recent-clients li span.preview{
  background:transparent url(images/preview.png) no-repeat scroll 0 0;
  bottom:15px;
  display:block;
  height:135px;
  left:25px;
  padding:20px 25px;
  position:absolute;
  width:138px;
  z-index:2;
}

.recent-clients li span.preview a{
  position: absolute;
  z-index: 100;
  border: 1px solid;
}


*html .recent-clients li span.preview, .block li.img img  {
  filter:expression(fixPNG(this));
}

.recent-clients li.first span.preview{
  left:-25px;
}

#top-block span.left{
  display:block;
  height:34px;
  left:-60px;
  position:absolute;
  top:168px;
  width:230px;
  background: url(images/reflect_l.png) no-repeat;
  z-index: -1;
}

#top-block span.right{
  display:block;
  height:34px;
  right:-60px;
  position:absolute;
  top:168px;
  width:230px;
  background: url(images/reflect_r.png) no-repeat scroll  right 0  ;
  z-index: -1;
}

#info{
  background: url(images/bg-info.png) no-repeat;
  padding-left:80px;
  padding: 15px 30px 20px 50px;
}


#info h2{
  font-family: Arial, Tahoma;
  margin: 0 auto 5px;
   width: 600px;
  line-height:14pt;
}

#info p{
  margin:0.3em 0;

}

body.main table td{
  width: 33%;
  vertical-align:top;
}
body.main table td.first{
 padding-right: 45px ;
 background: url(images/bg-td.png) no-repeat scroll 285px 0;
}

body.main table td.second{
 padding-right: 25px
}

body.main table td.third{
  background: url(images/bg-sidebar.png) no-repeat;
  padding-left:30px;
}

.block.technologies {
  background:transparent url(images/bg-block-technologies.jpg) repeat-x scroll 0 bottom;
}

.block.solutions {
  background:transparent url(images/bg-block-solutions.jpg) repeat-x scroll 0 bottom;
}

body.main table p, body.main table h3, body.main table h4{
  margin-left: 7px;
  margin-right: 7px;
}

.payment{
  text-align: center;
  background: url(images/stroke.png) repeat-x 50% bottom;
  padding-bottom: 12px;
  margin-bottom: 5px;
  margin-left:0px
}

.payment a{
  margin-left: 5px;
}


/*Contact*/

body.contact {background: url(images/bg-body-contact.png) repeat-x;}
body.contact #content-wrap { height: 340px; padding:60px 0 5px;}
body.contact #content-wrap .content{ background: none; width:660px;}
body.contact #content-wrap .content .sub{ height: auto;}
body.contact #content-wrap .sidebar { background: url(images/bg-sidebar_.png) no-repeat scroll 0 0; width:290px;}
body.contact #content-wrap .sidebar ul.contact{
  font-size: 11px;
  font-family: Tahoma;
  color:#b6b6b6;
  padding:18px 0 0 45px;
  margin-left:12px;
  position:relative;
  z-index:2;
}

body.contact #content-wrap .sidebar ul.contact li{ padding-bottom: 12px;  }

body.contact #form{
  position: relative;
  z-index: 2;
  padding:10px 0 0 65px;
  font-size: 11px;
  font-family: Tahoma;
  color:#b6b6b6;
}
body.contact #thanx{
  position: relative;
  z-index: 2;
  padding:10px 0 0 65px;
  font-size: 11px;
  font-family: Tahoma;
  color:#b6b6b6;
}
body.contact #thanx p
{
	font-size:12pt;
	line-height:14pt;
}
body.contact #form label{
  cursor:pointer;
  float:left;
  width:60px;
  padding-top:4px;
}

body.contact #form .input-wrap{
 margin:5px 0;
 background: url(images/bg-input.png) no-repeat scroll 58px 1px;
}

body.contact #form .textarea-wrap{
 background: url(images/bg-textarea.png) no-repeat 58px 1px ;
}

body.contact #form .button-wrap{
  text-align: right;
  padding:7px 32px;
}

body.contact #form .textarea-wrap label{
  padding-top: 9px;
}


body.contact #form input{
  //margin-top: -2px;
  background-color: transparent;
  border: none;
  padding: 5px;
  //padding-top:6px;
  font-size: 12px;
  font-family: Tahoma;
  color:#b6b6b6;
  width:200px;
}

body.contact #form  textarea{
   font-size: 12px;
  font-family: Tahoma;
  color:#b6b6b6;
  width: 490px;
  height: 165px;
  padding: 5px 4px 5px;
  background-color: transparent;
  border: none;
  margin: 5px 0;
  overflow: auto;
}

body.contact #form  .submit{
  height: 24px;
  width: 148px;
  background: url(images/bg-button.png) no-repeat;
  border: none;
  cursor: pointer;
}


.form-background{
  background-color:#000000;
  height:300px;
  margin-right:12px;
  position:absolute;
  right:0;
  top:0;
  width:610px;
  z-index: 1;
  opacity:0.25;
  filter: alpha(opacity=25);
}

.contact-background{
  background-color:#000000;
  height:200px;
  margin-left:12px;
  position:absolute;
  left:0;
  top:0;
  width:320px;
  z-index: 1;
  opacity:0.25;
  filter: alpha(opacity=25);
}


.form-background span, .contact-background span, .bg-portfolio-description span{
  display: block;
  font-size: 0;
  line-height: 0;
  height: 4px;
  width: 4px;
  background-image: url(images/corners_.png);
  background-repeat: no-repeat;
  background-color: #555;
  position: absolute;

}

span.tl{
  top: 0;
  left: 0;
}

span.tr{
  top: 0;
  right: 0;
//right: -1px;
  background-position: right 0;
}

span.bl{
  bottom: 0;
  left: 0;
  background-position: left bottom;
}

span.br{
  bottom: 0;
  right: 0;
//right: -1px;
  background-position: right bottom;
}

/*Portfolio*/

body.portfolio #content-wrap .content{
  width:535px;  background-image: none;
}

body.portfolio #content-wrap .sidebar{
  width:290px;  z-index:3; background-image: none;
}


body.portfolio{
  background: #787878 url(images/bg-body-portfolio.png) repeat-x;
}

body.portfolio #content-wrap {
  height: 640px;
  padding:0 0 0 40px;
  position: relative;
}

.bg-content-portfolio{
  width: 678px;
  height: 40px;
  background: url(images/bg-content-portfolio.png) no-repeat;
  position: absolute;
  bottom: 50px;
  left:-30px;
  z-index:-1;
}

.bg-preview-portfolio{
  width: 360px;
  height: 640px;
  background-color: #000;
  position: absolute;
  top: 0;
  right: -27px;
   opacity: 0.25;
  filter: alpha(opacity=25);

}

*html .bg-content-portfolio{
  background: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-content-portfolio.png', sizingMethod='crop');
}

.check{
  position: absolute;
  bottom: 0;
  left: 150px;
  height:36px;
  color:#CECECE;
  width: 250px;
}

.check a:link,.check a:visited{
  text-decoration: none;
  color: #CECECE;
}

.check .next{
  height: 9px;
  width: 9px;
  background: url(images/next.png) no-repeat;
  bottom: 13px;
  position: absolute;
  font-size: 0;
}

.check .web{
  background:transparent url(images/bg-check.png) no-repeat scroll 0 4px;
  bottom:0;
  height:36px;
  left:20px;
  line-height:3;
  padding:0 15px;
  position:absolute;
}
.check .web span, .check .iphone span{
  display: block;
  height: 36px;
  width: 13px;
  position: absolute;
  right: -1px;
  top: 0;
  background:transparent url(images/bg-check.png) no-repeat scroll -88px 4px;
}

*html .check .web span{
  right: -2px;
}


.check .iphone{
  background:transparent url(images/bg-check.png) no-repeat scroll 0 4px;
  bottom:0;
  height:36px;
  left:90px;
  line-height:3;
  padding:0 15px;
  position:absolute;
}


*html .check .next{
  background-position: 0 -9px;
}

.disable{
  opacity: 0.5;
  filter: alpha(opacity=50);
  cursor: pointer;
  border-top: 1px solid white;
}

.disable:hover{
  opacity: 1;
  filter: auto;
}

ul.thumbs li{
  float: left;
  height: 100px;
  width: 92px;
  position: relative;
  background: url(images/bg-preview.png) no-repeat;
  padding:1px 2px;
}

ul.thumbs li .reflect{
  display: block;
  height: 10px;
  width: 81px;
  background: url(images/preview-reflection.png) no-repeat;
  position: absolute;
  left: 0;
  bottom: 10px;
  font-size: 0;
  //background: none;
  //filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/preview-reflection.png', sizingMethod='crop');
}

#caption-adv{
  height: 75px;
  padding:20px;
  z-index:2;
  position: relative;
  font-size: 11px;
  font-family: Tahoma;
  color:#b6b6b6;
}

.image-desc{
  margin-bottom: 10px;
}

#controls-adv{
  height:35px;
  padding-top:25px;
 /* background: url(images/recruitment.png) no-repeat scroll 50% 30px;*/
}

#controls-adv .prev{
  width:93px;
  height: 24px;
  background: url(images/button-previous.png) no-repeat;
  display: block;
  float:left;
}

#controls-adv .next{
   width:62px;
   height: 24px;
   background: url(images/button-next.png) no-repeat;
   display: block;
   float:right;
}

.top.pagination {
  height:35px;
  margin-bottom:10px;
  padding-top:25px;
  background: url(images/stroke_.png) no-repeat scroll 50% bottom;
}

.bottom-pagination{
  background: url(images/stroke_.png) no-repeat scroll 50% top;
  height:25px;
  padding-top: 10px;
  clear: both;
}

.pagination a, .pagination span {
  background:transparent url(images/button-pagination.png) no-repeat;
  display:block;
  float:left;
  height:18px;
  padding:3px 6px;
  text-align:center;
  width:12px;
  margin-right:5px;
}

.pagination span.current{
  background:transparent url(images/button-pagination-current.png) no-repeat;
}

.pagination a.next{
  background:transparent url(images/button-next.png) no-repeat scroll 0 0;
  display:block;
  height:24px;
  width:62px;
  margin-left: 10px;
  padding: 0;
}

.pagination a.prev{
  background:transparent url(images/button-previous.png) no-repeat scroll 0 0;
  display:block;
  height:24px;
  width:93px;
  padding: 0;
}

*html #controls-adv .next,*html #controls-adv .prev,
*html .pagination span.current,*html .pagination a.prev,
*html .pagination a.next,*html .pagination a.usual{
  filter:expression(fixPNG(this)); cursor: pointer;
}

#slideshow-adv {
  text-align:center;
  z-index:1;
  position: relative;
  background: url(images/bg-screen.png) no-repeat scroll 50% 0;
  height: 460px;
}

.bg-portfolio-description {
  background-color:#000000;
  height:100px;
  position:absolute;
  left:40px;
  top:60px;
  width:535px;
  z-index:-1;
  opacity:0.25;
  filter: alpha(opacity=25);
}

.bg-portfolio-description span {
  background-color: #383838;
  background-image: url(images/corners_portf.png);
}


#slideshow-adv img {
  height:400px;
  width: 350px;
  padding-top: 5px;

}

/* Markup free clearing */

.clear-block:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

*html .clear-block {
  height: 1%;
}

#loading-adv {
  background: url(images/ajax-loader.gif) no-repeat;
  height:32px;
  width: 32px;
  position: absolute;
  top: 300px;
  left: 48%;
}


/* ~~~~~~~~~~~~~~~~~~~~~
Preview classes 
~~~~~~~~~~~~~~~~~~~~~~*/
.border_preview{
	z-index:100;
	position:absolute; 
	background: #fff;
	border: 1px solid #444;
}
.title_h2 {
 width:300px;
 padding:12px 0 0 18px;
}
.preview_temp_load {
	vertical-align:middle;
	text-align:center;
	padding: 10px;
}
.preview_temp_load img{	
	vertical-align:middle;
	text-align:center;
}
#loader_bg {
	background-color:#EBEBE4;
	position:relative;
	top:8px;left:8px;height:7px;
	width:113px;font-size:1px
}


body.iphone #content-wrap{

    height:560px;

    margin:0 auto;

    padding-top:80px;

    width:750px;

}