@charset "utf-8";

/*------------------------------------------------------------------------------------------------- */
body {
	margin: 0 auto;
	padding:0;
	background: #b2b2b2;
	text-shadow: #000 0 0;
	font: 10px Arial, helvetica, clean, sans-serif;
	line-height:1.2;
	text-align: center;
	overflow-y: scroll;	
}
html, body {
	height: 100%;
	
}

img {border:0}

table, tr, td, th {
	vertical-align: top;
	empty-cells: show;
	table-layout: auto;
	font-weight: normal;
	text-align: left;
}
p, table, tr, td, th, div, label, form, input {font-size: 12px; text-shadow: #000 0 0} 
p{margin-top:0; margin-bottom:0.8em; padding: 0;}
a:link, a:visited, a:hover, a:active {text-decoration: underline;}

sup, sub{
	vertical-align: baseline;
	position: relative;
    font-size:  79%; //font-size: 89%;
    line-height: 0;
}
sup{top: -0.5em;}
sup{bottom: -0.5em;}

blockquote {
	margin: 0.3em 0 0.3em 2.75em;
	padding: 0 0 0 0;
}

h1, h2, h3, h4, h5 {
	font-weight:normal;
}

h1{	font-size:200%; line-height:22px; margin: 3px 0 3px 0;}
h2{	font-size:160%; line-height:21px; margin: 3px 0 3px 0;}
h3{	font-size:140%; line-height:18px; margin: 3px 0 3px 0;}
h4{	font-size:120%; line-height:14px; margin: 0;}
h5{	font-size:120%; line-height:14px; margin: 0; font-style: italic;}
h1.first, h2.first, h3.first, h4.first, h5.first,
h1.alone, h2.alone, h3.alone, h4.alone, h5.alone {margin-top: 22px;}
h1.last, h2.last, h3.last, h4.last, h5.last,
h1.alone, h2.alone, h3.alone, h4.alone, h5.alone {margin-bottom: 12px;}

/* список */
/* Маркированый список.
------------------------------------------------------------------------------------------------- */
 .list p
, .list ul
, .list ol
{
    padding: 0;
	margin: 0.5em 0;
}
.list li
{
    margin: 0.5em 0 0.5em 1.3em;
}
.list ul
{
	list-style-type: none;
    //list-style-image: url('../images/li.gif');
}
.list ul li
{
	padding: 0;
	behavior: expression(
            ( !this.before && parentNode && parentNode.tagName == 'UL' )
            ?
                ( this.before = true )
                & ( parentNode.style.listStyleImage = 'none' )
                & (
                    ( this.firstChild && this.firstChild.firstChild )
                    ?
                        ( this.firstChild.style.marginTop = '-1.2em' )
                        & ( this.firstChild.style.position = 'relative' )
                    : ''
                )
                & ( eNOBR = document.createElement( '<nobr style="position: relative; display: block; width: 1.25em; left: -1.25em; margin: 0 -1.25em -1.2em 0;" />' ) )
                & ( eNOBR.innerHTML = '&mdash;&nbsp;' )
            & ( this.insertBefore( eNOBR, this.firstChild ) )
        : ''
    );
}
.list ul>li:before
{
    content: '\2014\a0';
    float: left;
    margin-left: -1.25em;
}
.list ul>li>*:first-child:-moz-first-node
{
    margin-top: -1.2em;
}
.list ul>li>*
{
    text-indent: 0;
}
.list .sup
{
	position: relative;
    top: -0.5em;
    font-size: 0.75em; //font-size: 0.89em;
	line-height: 0;
	vertical-align: baseline;
}

/* class for empty elements */
.empty {clear:both; display:block; float:none; height:1px; width: 1px; font-size:1px;}

#content {
	width: 100%;
	min-height: 100%;
	height: 100%;
	background: url(../images/header_bg.png) center top repeat-x;
	border-top: solid #1a1a1a 11px;
}
* html #content {height: 100%}
#content th {width:800px}

#content .tr_header {height: 250px}
#content .tr_header a#toplogo {
	text-align: center;
	color: #FFFFFF;
	clear: both;
	width: 800px;
	height: 211px;
	top: 0px;
	position: relative;
	left: 0px;
	overflow: hidden;
	margin:0; padding:0;
	cursor: pointer; cursor: hand;
	display: block;
}
#content .tr_header a#toplogo h1,
#content .tr_header a#toplogo h2 {color:#FFFFFF; visibility:hidden; margin:0; padding:0}
#content .tr_header th{background: url(../images/header_bg_logo.png) center top no-repeat}

/* MAIN MENU ------------------------------------------------------------------*/
#content .tr_header #mainmenu {width: 98%; margin: 0 0 0 2%;}
#content .tr_header #mainmenu td {
	color: #ffc180;
	font-size: 14pt;
	text-align: center;
	height: 39px;
}
#content .tr_header #mainmenu td span,
#content .tr_header #mainmenu td a {
	width: 68%;
	display: block;
	text-decoration: none;
	text-align: center;
	height: 22px;
	margin: 0 0 0 16%;
	padding: 9px 0 3px 0;
}
#content .tr_header #mainmenu td span sup,
#content .tr_header #mainmenu td a sup{font-weight:bold; font-size: 69%; //font-size: 79%}

#content .tr_header #mainmenu td span {border-bottom:5px solid #a4a6a8; color:#a4a6a8; cursor:default}

#content .tr_header #mainmenu td a:link,
#content .tr_header #mainmenu td a:visited {text-decoration:none; color: #a4a6a8}
#content .tr_header #mainmenu td a:hover,
#content .tr_header #mainmenu td a:active {text-decoration:none; color:#ffc180; border-bottom:5px solid #ffc180}


#content .tr_middle{height: 100%; background: url(../images/main_bg.png) center top repeat-x}
#content .tr_middle td.cm, #content .tr_middle th.cm {border-bottom: solid #1a1a1a 5px}

/* OUR PROJECTS BAR --------------------------------------------------*/
.our_proj,
.our_proj div,
.our_proj div div {height: 101px}
.our_proj {margin: 19px 0 0 0; background: url(../images/our_proj_bg_c.png) repeat-x; overflow:hidden}
.our_proj div{background: url(../images/our_proj_bg_l.png) left top no-repeat; padding-left: 11px}
.our_proj div div{background: url(../images/our_proj_bg_r.png) right top no-repeat; padding: 14px 11px 0 0}
.our_proj table {width:100%; height:74px}
.our_proj table td {/*width:25%;*/}
.our_proj table td.sep {
	width:10px;
	font-size: 1px;
	background: url(../images/our_proj_separator.png) repeat-y;
}
.our_proj table span {cursor: default}

.our_proj table span,
.our_proj table a
{
	width: 100%;
	display:block;
	float:left;
	padding-bottom: 14px;
}
.our_proj table span span,
.our_proj table a span
{
	width:46px;
	display:block;
	float:left;
}
.our_proj table span em,
.our_proj table a em
{
	display:block;
	float:left;
	padding: 10px 0 0 0;
}
.our_proj table span span i,
.our_proj table a span i
{
	width: 36px; height: 36px;
	background: url(../images/our_proj_logos.png) no-repeat;
	display: block;
	margin: 10px 5px 0 5px;
}
.our_proj table span em i,
.our_proj table a em i
{
	background: url(../images/our_proj_names.png) no-repeat;
	display:block;
	margin-bottom:0px;
	clear: both;
	height: 26px;
	width:50px;
}
.our_proj table span em small,
.our_proj table a em small {
	font-size:10px;
	line-height:10px;
	text-decoration:none;
	display:block;
	text-indent: -2px;
	padding-left:3px;
}
.our_proj table a:link, .our_proj table a:visited {text-decoration:none; cursor:pointer; cursor:hand;}
.our_proj table a:active, .our_proj table a:hover {text-decoration:none; background-color: #fff/*#d4d4c0;*/}

.our_proj table a em small {color: #4c4356}
.our_proj table span em small {color: #aaa8ad}

.our_proj table span.proj_photocoolus span i {background-position: 0px 0px}
.our_proj table a.proj_bacoolus span i {background-position: -36px 0px}
/*.our_proj table span.proj_graphycoolus span i {background-position: -72px 0px}*/
.our_proj table a.proj_graphycoolus span i {background-position: -72px 0px}
.our_proj table a.proj_rire span i {background-position: -108px 0px}

.our_proj table span.proj_photocoolus em i {background-position:0px 0px; width:93px}
.our_proj table a.proj_bacoolus em i {background-position: -93px 0px; width:66px}
/*.our_proj table span.proj_graphycoolus em i {background-position: -159px 0px; width:105px}*/
.our_proj table a.proj_graphycoolus em i {background-position: -159px 0px; width:105px}
.our_proj table a.proj_rire em i {background-position: -264px 0px}

/* N-WWA-WWD BAR --------------------------------------------------*/
.nwwawwd {border:0; margin-bottom:19px; margin-top:19px}
.nwwawwd #header {
	height: 57px;
	/*border-bottom: 20px solid #363;*/
	/*background: red;*/
	font-size: 1px;
	margin:0;
	padding:0;
	line-height: 1px;
	background: url(../images/nwwawwd_bg_title.png) top left no-repeat;
	z-index: 4;
}
.nwwawwd #cell3 {
	background: url(../images/nwwawwd_bg_middle.png) top left repeat-y;
	width:100%;
	float:left;
	margin:0; padding:0;
}
.nwwawwd #cell2 {
	width:518px;
	float:left;
}
.nwwawwd #cell1 {
	width:250px;
	float:left;
	text-align: justify;	
}
.nwwawwd #cell1 p {margin-right: 22px}
.nwwawwd #cell1a p {margin-right: -22px}
.nwwawwd #cell2a	{width:276px;margin-right:-276px;}
.nwwawwd #cell3a	{width:290px;margin-right:-282px;}

.nwwawwd #cell2a, .nwwawwd #cell3a {
	float:right;
	position:relative;
}
.nwwawwd p {padding:0;margin:0;}
.nwwawwd #footer {
	clear: both;
	height: 10px;
	font-size: 1px;
	background: url(../images/nwwawwd_bg_b.png) top left no-repeat; 
}
.nwwawwd h1,.nwwawwd h3,.nwwawwd p {margin-top: 0;}
.nwwawwd h1,.nwwawwd h2,.nwwawwd h3,
.nwwawwd p,.nwwawwd table {margin-left:12px;}
.nwwawwd h3 {margin-bottom: 0;}

.nwwawwd #cell2a p {
	font-size: 1.2em;
	font-style: normal;
	line-height: 1.4em;
	color: #fff;
}

.nwwawwd #cell3a p{
	font-size: 10pt;
	line-height: 1.3em;
	text-indent: -17px;
	padding-left:17px;
	color: #36393c;
}
.nwwawwd .readmore a {font-size: 11px;color: #fff;}
	
/* TITLE */
.nwwawwd .news,.nwwawwd .whoweare,.nwwawwd .whatwedo {display:none}
.nwwawwd .onenews {
	font-size: 10pt;
	line-height: 1.3em;
	color: #36393c;
}
.nwwawwd .onenews .readmore a {font-size: 11px;color: #36393c;}




/* WE LOVE -------------------------------------------------------*/
dl.welove {width: 800px}
dl.welove, .welove dt, .welove dd {margin:0; padding:0}
dl.welove {background: url(../images/welove_bg_bottom.png) bottom left no-repeat; padding-bottom:10px}
.welove dt
{
	height: 10px;
	background: url(../images/welove_bg_top.png) top left no-repeat;
	font-size: 1px;
}
.welove dd
{
	text-align: justify;
	background: url(../images/welove_bg_middle.png) top left repeat-y;
	display: block;
	height: 43px;
	padding-left:12px;
}
.welove .title
{
	background: url(../images/welove_title.png) center left no-repeat;
	height: 43px;
	width: 140px;
	float: left;

}
.welove .title h3 {display: none}
.welove .logos {
	float: left;
	width: 626px;
	height: 43px;
	margin-left:10px;

}
.welove .logos i {
	float: left;
	height: 41px;
	display: block;
	background: url(../images/welove_logos.png) no-repeat;
	cursor:pointer; cursor:hand;
	margin: 0 1% 0 1%;
}
/* LOGOS LINKS */
.welove .logos a:link i.rubi,.welove .logos a:visited i.rubi {width:36px; background-position: 0px 0px}
.welove .logos a:link i.ror,.welove .logos a:visited i.ror {width:32px; background-position: -36px 0px}
.welove .logos a:link i.jqueri,.welove .logos a:visited i.jqueri {width:43px; background-position: -68px 0px}
.welove .logos a:link i.ajax,.welove .logos a:visited i.ajax {width:68px; background-position: -111px 0px}
.welove .logos a:link i.amazonws,.welove .logos a:visited i.amazonws {width:83px; background-position: -179px 0px}
.welove .logos a:link i.mysql,.welove .logos a:visited i.mysql {width:58px; background-position: -262px 0px}
.welove .logos a:link i.apple,.welove .logos a:visited i.apple {width:33px; background-position: -320px 0px}
.welove .logos a:link i.postgresql,.welove .logos a:visited i.postgresql {width:51px; background-position: -353px 0px}
.welove .logos a:link i.sqlite,.welove .logos a:visited i.sqlite {width:101px; background-position: -404px 0px}
/* LOGOS HOVER */
.welove .logos a:hover i.rubi,.welove .logos a:active i.rubi {background-position: 0px -41px}
.welove .logos a:hover i.ror,.welove .logos a:active i.ror {background-position: -36px -41px}
.welove .logos a:hover i.jqueri,.welove .logos a:active i.jqueri {background-position: -68px -41px}
.welove .logos a:hover i.ajax,.welove .logos a:active i.ajax {background-position: -111px -41px}
.welove .logos a:hover i.amazonws,.welove .logos a:active i.amazonws {background-position: -179px -41px}
.welove .logos a:hover i.mysql,.welove .logos a:active i.mysql {background-position: -262px -41px}
.welove .logos a:hover i.apple,.welove .logos a:active i.apple {background-position: -320px -41px}
.welove .logos a:hover i.postgresql,.welove .logos a:active i.postgresql {background-position: -353px -41px}
.welove .logos a:hover i.sqlite,.welove .logos a:active i.sqlite {background-position: -404px -41px}


/* PAGES WHITE FIELD -----------------------------------------------------*/

.whitefield {margin-top:19px}
.whitefield .ml { padding: 0 3px; background: #FFF;
// width: 100%; }
.whitefield .tl, .whitefield .bl { height: 7px; position: relative; font-size: 1px; line-height: 1px;
// padding: 0 7px; }
.whitefield .tml, .whitefield .bml { height: 7px; position: absolute; left: 7px; right: 7px; font-size: 1px; background: #FFF;
// width: 100%; }
.whitefield .tlc, .whitefield .trc, .whitefield .blc, .whitefield .brc { position: relative; font-size: 1px; width: 7px; height: 7px;
-background: none !important; }
.whitefield .tlc { float: left; background: url('../images/wf_tlc.png') 0 0 no-repeat;
// left: -7px;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../images/wf_tlc.png', sizingMethod=crop); }

.whitefield .trc { float: right; background: url('../images/wf_trc.png') 0 0 no-repeat;
// right: -7px;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../images/wf_trc.png', sizingMethod=crop); }

.whitefield .blc { float: left; background: url('../images/wf_blc.png') 0 0 no-repeat;
// left: -7px;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../images/wf_blc.png', sizingMethod=crop); }

.whitefield .brc { float: right; background: url('../images/wf_brc.png') 0 0 no-repeat;
// right: -7px;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../images/wf_brc.png', sizingMethod=crop); }

.whitefield .margins
{
	margin-left: 13px;
	padding-right: 13px;
	margin-bottom: 40px;
}

/* PAGES WHITE FIELD TITLES */

.whitefield .pagetitle_team
{
	background: url(../images/pagetitle_team.png) 10px 8px no-repeat;
	height: 31px;
	clear: both;
}
.whitefield .pagetitle_team h1 {display:none}

/* TEAM PHOTOS AND PICS */
.team_mainpic
{
	background: url(../images/team_haeckel_drawings.png) 0 0 no-repeat;
	height: 254px;
	width: 794px;
	clear: both;
	margin-bottom: 19px;
}

/* PORTFOLIO ITEMS ------------------------------------------------------------------*/
.portfolio_item {
	padding: 10px 0 0 0;
	margin: 0 0 16px 0;
	width: 382px;
	float: left;
	text-decoration: none;
	color: #333333;
	background: url(../images/portfolio_item_bg.png) no-repeat;
	background-position: 0px 0px;
}

.portfolio_item .item_img
{
	padding: 0 0 0 45px;
	display: block;
	width: 335px;
	height: 172px;
	overflow: hidden;	
}


.portfolio_item .item_img a:link,
.portfolio_item .item_img a:visited {margin-top: 5px; display: block;}	
.portfolio_item .item_img a:hover,
.portfolio_item .item_img a:active {margin-top: 0px;}


.portfolio_item .item_more_screens {display: none;}

.portfolio_item .item_info {
	padding: 5px 20px 0 10px;
	width: auto;
	text-decoration: none;
}

.portfolio_item .item_info a {
	color: #4166A5;
}

.portfolio_item .item_info a:hover {
	color: #543B7B;
}


.portfolio_item .item_info strong {
	color: #543B7B;
	font-size: 18px;
	letter-spacing: -0.05em;
	font-weight: normal;
	line-height: 0.9em;
	border-left: solid #543B7B 3px;
	padding: 2px 0 2px 5px;
	margin-left: -8px;
	display: block;
}






/* FOOTER ------------------------------------------------------------------*/
#content .tr_footer {height: 86px;background-color: #5D5D5D}
#content .tr_footer .a,
#content .tr_footer .b {background: url(../images/footer_bg.png) right top repeat-x}
#content .tr_footer .c {background: url(../images/footer_bg.png) left top repeat-x}

#content .tr_footer .b {
	color: #b2b2b2;
	padding-top:12px;
	font-size: 11px;
	text-align: center;
}

#content .tr_footer .b a:link, #content .tr_footer .b a:visited {text-decoration:none; color:#b2b2b2}
#content .tr_footer .b a:hover, #content .tr_footer .b a:active {text-decoration:underline}