/*
 * Common
 */
html * {border: 0; color: #ffffff; font-family: Arial; font-size: 12px; margin: 0; padding: 0;}
body {background-color: #0d0e12; background-repeat: repeat-x; background-image: url(../images/bodyBg.gif);}
div.container, ul.container {width: 999px; margin: 0 auto;}
.noBottomLine {border-bottom: none !important;}
.gray {color: #c3c7d0;}
.clear {clear: both;}
h1 span {display: none;}
h2 span {display: none;}
a {text-decoration: none;}
a:HOVER, a.active {text-decoration: underline;}
a.arrowWithYellow {padding-left: 13px; background: url(../images/readMore.gif) no-repeat 0 3px; color: #fff000;}

input, textarea {border: 1px solid #56585b; background: transparent; color: #c3c7d0; padding: 3px 6px; font-size: 12px; font-family: Arial;}
textarea {padding: 10px;}

div#sectionTop {height: 75px; border-bottom: 1px solid #a9abb1; margin-bottom: 31px;}
div#sectionTop h1 {float: left; height: 42px; margin: 9px 0 0 35px; background-repeat: no-repeat; display: inline;}
div.section p a {text-decoration: underline;}
div.section p a:HOVER {color: #fff000;}

/**
 * Section items border-color
 */
div.item1 {border-color: #adafb5 !important;}
div.item2 {border-color: #a3a6ac !important;}
div.item3 {border-color: #8f9196 !important;}
div.item4 {border-color: #7c7d82 !important;}


/**
 * Top
 */
div#job {position: absolute; top: 0; right: 0; width: 148px; display: none;}
div#top {height: 112px;}
div#top div#info {float: right; margin-right: 35px;}
div#top div#info, div#top div#info a {color: #5d5e5f; font-size: 11px; line-height: 25px;}
div#top div#info span#languages {margin-left: 14px;}
div#top div#info span#languages a {background-color: #050505; padding: 5px 7px; margin-right: 1px;}
div#top div#info span#languages a:HOVER,
div#top div#info span#languages a.active {color: #ffffff;}

/**
 * Menu
 */
div#menu {height: 39px; border-bottom: 1px solid #7a7e81;}
div#menu ul {list-style-type: none; margin-left: 35px; height: 29px;}
div#menu ul li {float: left; background: url(../images/menuSeparator.gif) no-repeat left; margin-right: 28px; padding-left: 15px;}
div#menu ul li a {line-height: 29px; text-transform: uppercase;}

/**
 * Submenu
 */
ul#submenu {float: left; list-style-type: none; border-bottom: 1px solid #65676b; margin: 29px 0 0 12px; height: 23px;}
ul#submenu li {float: left; margin-right: 1px; height: 23px;}
ul#submenu li a {display: block; background-color: #65676b; text-transform: uppercase; font-size: 9px; line-height: 23px; padding: 0 10px;}

/**
 * Breadcrumbs
 */
div#breadcrumbs {border-bottom: 1px solid #878a8e;}
div#breadcrumbs ul {height: 25px; list-style-type: none; margin-left: 35px;}
div#breadcrumbs ul li {float: left; color: #ffffff; line-height: 25px; font-size: 11px; text-transform: lowercase; margin-right: 5px;}
div#breadcrumbs ul li a {color: #c3c8d2; background: url(../images/breadcrumbsSeparator.gif) no-repeat right; padding-right: 10px; font-size: 11px; }

/**
 * Page: index
 */
div.visualBg {background: url(../images/visualBg.jpg) center no-repeat; height: 361px;}
div#identity {height: 361px;}
div#identity ul#visual {float: left; width: 679px;}
div#identity ul#visual h1 {background-repeat: no-repeat; float: right; display: inline; margin-top: 80px;}
div#identity ul#visual p {clear: right; float: right; width: 309px; display: inline; margin: 10px 45px 0 0;}
div#identity ul#visual p a.readMore {font-size: 9px; text-transform: uppercase; padding: 3px 8px 2px 17px; background: url(../images/readMore.gif) no-repeat 4px 4px #1c2226; line-height: 17px; margin-left: 10px;}
div#identity ul#visual li {display: none; height: 361px; background-repeat: no-repeat;}
div#identity ul#visual li.web {display: block; background-image: url(../images/identity3w.jpg);}
div#identity ul#visual li.web h1 {background-image: url(../images/identityH13w.gif); height: 70px; width: 309px; margin-right: 45px;}
div#identity ul#visual li.systems {display: block; background-image: url(../images/identitySd.jpg);}
div#identity ul#visual li.systems h1 {background-image: url(../images/identityH1Sd.gif); height: 70px; width: 330px; margin-right: 24px;}
div#identity ul#visual li.cms {display: block; background-image: url(../images/identityCms.jpg);}
div#identity ul#visual li.cms h1 {background-image: url(../images/identityH1Cms.gif); height: 77px; width: 239px; margin-right: 116px; margin-top: 73px;}
div#identity ul#visual li.seo {display: block; background-image: url(../images/identitySeo.jpg);}
div#identity ul#visual li.seo h1 {background-image: url(../images/identityH1Seo.gif); height: 69px; width: 302px; margin-right: 52px; margin-top: 81px;}
div#identity ul#visual li.ecommerce {display: block; background-image: url(../images/identityEc.jpg);}
div#identity ul#visual li.ecommerce h1 {background-image: url(../images/identityH1Ec.gif); height: 70px; width: 285px; margin-right: 69px;}
div#identity ul#visual li.php {display: block; background-image: url(../images/identityPhp.jpg);}
div#identity ul#visual li.php h1 {background-image: url(../images/identityH1Php.gif); height: 68px; width: 313px; margin-right: 41px; margin-top: 82px;}
div#identity ul#visual li.mysql {display: block; background-image: url(../images/identityMq.jpg);}
div#identity ul#visual li.mysql h1 {background-image: url(../images/identityH1Mq.gif); height: 33px; width: 137px; margin-right: 221px; margin-top: 81px;}
div#identity ul#visual li.html {display: block; background-image: url(../images/identityHtml.jpg);}
div#identity ul#visual li.html h1 {background-image: url(../images/identityH1Xhtml.gif); height: 68px; width: 138px; margin-right: 216px; margin-top: 82px;}
div#identity ul#visual li.js {display: block; background-image: url(../images/identityJs.jpg);}
div#identity ul#visual li.js h1 {background-image: url(../images/identityH1Js.gif); height: 69px; width: 227px; margin-right: 127px; margin-top: 81px;}
div#identity ul#visual li.fla {display: block; background-image: url(../images/identityFla.jpg);}
div#identity ul#visual li.fla h1 {background-image: url(../images/identityH1Fla.gif); height: 68px; width: 237px; margin-right: 117px; margin-top: 82px;}

div#identity ul {list-style-type: none;}
div#identity ul#identityMenu {margin-top: 48px; width: 320px; float: right; width: 320px; height: 30px; border-bottom: 1px solid #9fa1a7;}
div#identity ul#identityMenu li {float: left;}
div#identity ul#identityMenu li a {display: block; background-image: url(../images/identityMenuBg.gif); background-repeat: no-repeat; height: 30px; background-position: 0 -30px;}
div#identity ul#identityMenu li a span {display: none;}
div#identity ul#identityMenu li.services {width: 130px;}
div#identity ul#identityMenu li.services a:HOVER,
div#identity ul#identityMenu li.services a.active {background-position: 0 0;}
div#identity ul#identityMenu li.technology {width: 190px;}
div#identity ul#identityMenu li.technology a {background-position: -130px -30px;}
div#identity ul#identityMenu li.technology a:HOVER,
div#identity ul#identityMenu li.technology a.active {background-position: -130px 0;}

div#identity {border-bottom: 1px solid #7c7e83;}
div#identity ul#servicesMenu,
div#identity ul#technologyMenu {clear: right; width: 320px; float: right; border-bottom: 1px solid #909298;}
div#identity ul#servicesMenu li,
div#identity ul#technologyMenu li {height: 44px; background-position: left center; background-repeat: no-repeat;}
div#identity ul#servicesMenu li a,
div#identity ul#technologyMenu li a {display: block; height: 44px; margin-left: 38px; background-repeat: no-repeat; border-bottom: 1px solid #abadb4;}
div#identity ul#servicesMenu li a.indented,
div#identity ul#technologyMenu li a.indented {margin-left: 77px;}
div#identity ul#servicesMenu li a:HOVER, div#identity ul#servicesMenu li a.active,
div#identity ul#technologyMenu li a:HOVER, div#identity ul#technologyMenu li a.active {background-position: 0 -44px;}
div#identity ul#servicesMenu li a span,
div#identity ul#technologyMenu li a span {display: none;}
div#identity ul#technologyMenu {display: none;}
div#identity ul#servicesMenu li.web {background-image: url(../images/symbol3w.gif);}
div#identity ul#servicesMenu li.web a {background-image: url(../images/servicesMenu3w.gif);}
div#identity ul#servicesMenu li.systems {background-image: url(../images/symbolSd.gif);}
div#identity ul#servicesMenu li.systems a {background-image: url(../images/servicesMenuSd.gif);}
div#identity ul#servicesMenu li.cms {background-image: url(../images/symbolCms.gif);}
div#identity ul#servicesMenu li.cms a {background-image: url(../images/servicesMenuCms.gif);}
div#identity ul#servicesMenu li.seo {background-image: url(../images/symbolSeo.gif);}
div#identity ul#servicesMenu li.seo a {background-image: url(../images/servicesMenuSeo.gif);}
div#identity ul#servicesMenu li.ecommerce {background-image: url(../images/symbolEc.gif);}
div#identity ul#servicesMenu li.ecommerce a {background-image: url(../images/servicesMenuEc.gif);}
div#identity ul#technologyMenu li.php {background-image: url(../images/symbolPhp+zf.gif);}
div#identity ul#technologyMenu li.php a {background-image: url(../images/technologyMenuPhp.gif);}
div#identity ul#technologyMenu li.mysql {background-image: url(../images/symbolMq.gif);}
div#identity ul#technologyMenu li.mysql a {background-image: url(../images/technologyMenuMq.gif);}
div#identity ul#technologyMenu li.html {background-image: url(../images/symbolXh+css.gif);}
div#identity ul#technologyMenu li.html a {background-image: url(../images/technologyMenuHtml.gif);}
div#identity ul#technologyMenu li.js {background-image: url(../images/symbolJs+jq.gif);}
div#identity ul#technologyMenu li.js a {background-image: url(../images/technologyMenuJs.gif);}
div#identity ul#technologyMenu li.fla {background-image: url(../images/symbolFla.gif);}
div#identity ul#technologyMenu li.fla a {background-image: url(../images/technologyMenuFla.gif);}

div.indexBottom {margin-bottom: 50px; overflow: hidden;}
div.indexBottomBox {float: left;}
div.indexBottomBox div h2 {margin: 19px 0 0 35px; width: 200px; height: 19px; background-repeat: no-repeat; display: block;}
div.indexBottomBox div.h2 {border-bottom: 1px solid #75777c;}
div.indexBottomBox p {line-height: 16px;}
div.indexBottomBox div.readMore {border-top: 1px solid #545558; padding-top: 9px;}
div.indexBottomBox div.readMore a {padding-left: 13px; margin-left: 35px; background: url(../images/readMore.gif) no-repeat 0 1px; font-size: 9px; text-transform: uppercase;}
div#recentProjects.indexBottomBox {width: 403px; margin-right: 14px;}
div#recentProjects.indexBottomBox h2 {background-image: url(../images/indexH2RecentProjects.gif);}
div#recentProjects div.project {width: 340px; border-bottom: 3px solid #646569; margin: 11px 0 0 35px; padding-bottom: 11px; clear: both; height: 80px;}
div#recentProjects div.project a.img {display: block; float: left; width: 101px; margin-right: 12px;}
div#news.indexBottomBox {width: 302px; margin-right: 14px;}
div#news.indexBottomBox h2 {background-image: url(../images/indexH2News.gif);}
div#news.indexBottomBox div.news {width: 235px; border-bottom: 3px solid #646569; margin: 11px 0 0 35px; padding-bottom: 11px; height: 80px;}
div#contact.indexBottomBox {width: 265px;}
div#contact.indexBottomBox div.info {height: 187px; padding-top: 20px;}
div#contact.indexBottomBox div.info p {color: #c3c7d0}
div#contact.indexBottomBox h2 {background-image: url(../images/indexH2Contact.gif);}
div#contact.indexBottomBox p {margin-left: 35px; line-height: 26px;}
div#contact.indexBottomBox strong.yellow {color: #fff000;}

/**
 * Page: news
 */
div#sectionTop.news h1 {background-image: url(../images/newsH1.gif); width: 260px;}
div#newslist {overflow: hidden; border-bottom: 1px solid #47484b;}
div#newslist div.news {float: left; width: 440px; border-bottom: 3px solid #9da0a5; margin-bottom: 19px; height: 115px; display: inline;}
div#newslist div.news a.img {float: left; display: block; width: 185px; margin-right: 14px;}
div#newslist div.news div.summary {float: left; width: 241px;}
div#newslist div.news div.summary.noImage {width: 100%;}
div#newslist div.odd {margin-left: 35px;}
div#newslist div.even {margin-left: 50px;}
div#newslist div p {line-height: 16px;}

div#newsView {overflow: hidden; margin-bottom: 10px;}
div#newsView div.img {width: 445px; float: left; margin: 0 45px 0 35px; font-style: italic; display: inline;}
div#newsView div.content {float: left; width: 440px;}
div#newsView div.content.noImage {width: 100%;}
div#newsView div.content * {line-height: 16px;}
div#newsView div.content p {text-align: justify;}
div#newsView div.content p.title {color: #fff000; font-size: 20px; background: url(../images/readMore.gif) no-repeat 0 8px; padding-left: 15px; margin-bottom: 5px; line-height: 22px;}
div#newsView div.content ul {margin: 10px 10px 10px 25px; list-style-type: disc;}
div#newsView div.img, div#newsView div.content {margin-bottom: 20px;}
div#newsOptions {clear: both; border-top: 1px solid #47484b; height: 27px; overflow: hidden; padding-right: 34px;}
div#newsOptions a {display: block; line-height: 27px; float: right; font-size: 9px; text-transform: uppercase; margin-left: 24px; padding-left: 13px; background-repeat: no-repeat; background-position: 0 9px;}
div#newsOptions a.next {background-image: url(../images/readMore.gif);}
div#newsOptions a.prev {background-image: url(../images/readLess.gif);}
div#newsOptions a.back {background-image: url(../images/readAll.gif);}

/**
 * Page: portfolio
 */
div#sectionTop.portfolio {margin-bottom: 0;}
div#sectionTop.portfolio h1 {background-image: url(../images/portfolioH1.gif); width: 214px;}
div#portfolio div.section {border-bottom: 1px solid #8f9196; height: 37px;}
div#portfolio div.active {height: 275px; padding-top: 25px;}
div#portfolio div.section a.link {line-height: 37px; padding-left: 15px; background: url(../images/readMore.gif) no-repeat 0 4px; margin-left: 120px;}
div#portfolio div.section div.info div.text {width: 585px; float: left; line-height: 16px;}
div#portfolio div.section div.info div.text div {margin-bottom: 10px; overflow: hidden;}
div#portfolio div.section div.info div.text div p.scope {float: left; width: 420px; text-align: justify;}
div#portfolio div.section div.info div.text div.symbols {margin-top: 20px;}
div#portfolio div.section div.info div.text div.symbols p {line-height: 30px;}
div#portfolio div.section div.info div.text div.symbols p.tech {width: 90px;}
div#portfolio div.section div.info div.text div.symbols img {float: left; margin-right: 5px;}
div#portfolio div.section div.info div.text p.gray {width: 105px; text-align: right; display: block; float: left; margin-right: 16px;}
div#portfolio div.section div.info div.images {float: right; width: 405px; text-align: center;}

/**
 * Page: company
 */
div#sectionTop.company {margin-bottom: 15px;}
div#sectionTop.company h1 {background-image: url(../images/companyH1.gif); width: 172px;}
div#company div.section {height: 193px; border-bottom: 1px solid #919298; margin-bottom: 15px;}
div#company div.item2 {border-color: #65666a;}
div#company div.item3 {border-color: #48494b;}
div#company div.section h2 {background-repeat: no-repeat; height: 27px; width: 105px; margin: 0 0 20px 35px; float: left;}
div#company div.item1 h2 {background-image: url(../images/companyH2Vision.gif);}
div#company div.item2 h2 {background-image: url(../images/companyH2Team.gif);}
div#company div.item3 h2 {background-image: url(../images/companyH2Rules.gif);}
div#company div.item1 img {width: 73px; margin-right: 160px;}
div#company div.item2 img {width: 119px; margin-right: 130px;}
div#company div.item3 img {width: 184px; margin-right: 125px;}
div#company div.section img {float: right; height: 194px;}
div#company div.section div.info {float: left; clear: left; width: 600px; margin-left: 35px;}
div#company div.section div.info p {line-height: 16px; text-align: justify; margin-bottom: 8px;}

div#foldingSections div.section {border-bottom: 1px solid #a3a6ac; padding: 15px 0; overflow: hidden;}
div#foldingSections div.active {padding: 35px 0;}
div#foldingSections div.section a.title {margin-left: 35px; padding-left: 38px; display: block; height: 30px; background-repeat: no-repeat; width: 600px; float: left;}
div#foldingSections div.section a.title img {margin-top: 5px;}
div#foldingSections div.web a.title {background-image: url(../images/symbol3w.gif); }
div#foldingSections div.web img.symbol {width: 269px; height: 199px; margin-top: -35px;}
div#foldingSections div.systems a.title {background-image: url(../images/symbolSd.gif); }
div#foldingSections div.cms a.title {background-image: url(../images/symbolCms.gif); }
div#foldingSections div.cms a.title img {margin-top: 0px;}
div#foldingSections div.seo a.title {background-image: url(../images/symbolSeo.gif); }
div#foldingSections div.ecommerce a.title {background-image: url(../images/symbolEc.gif); }
div#foldingSections div.php a.title {background-image: url(../images/symbolPhp+zf.gif); padding-left: 76px;}
div#foldingSections div.mysql a.title {background-image: url(../images/symbolMq.gif);}
div#foldingSections div.html a.title {background-image: url(../images/symbolXh+css.gif); padding-left: 76px;}
div#foldingSections div.js a.title {background-image: url(../images/symbolJs+jq.gif); padding-left: 76px;}
div#foldingSections div.fla a.title {background-image: url(../images/symbolFla.gif);}
div#foldingSections.technologies div.section img.symbol {margin-right: 25px;}

div#foldingSections div.section img.symbol {float: right;}
div#foldingSections div.info {margin-left: 35px; padding-top: 25px; width: 600px; clear: left; text-align: justify;}
div#foldingSections div.info p {line-height: 18px;}

/**
 * Page: career
 */
div#career {border-bottom: 1px solid #65666a; padding-bottom: 20px;}
div#career h2 {background: url(../images/careerH2.gif) no-repeat; height: 27px; width: 110px; margin: 0 0 20px 35px;}
div#career p {margin: 0 35px 8px 35px;}
div#career ul {margin: 0 0 8px 60px;}

/**
 * Page: contact
 */
div#contact {overflow: hidden; margin-bottom: 10px;}
div#sectionTop.contact h1 {background-image: url(../images/contactH1.gif); width: 172px;}
div#contact h2.header {background-image: url(../images/contactHeader.gif); width: 315px; height: 55px; margin-bottom: 17px;}
div#contact h2.form {background-image: url(../images/contactForm.gif); width: 403px; height: 55px; margin: 40px 0 20px 0;}
div#contact div#map {width: 445px; height: 705px; overflow: hidden; float: left; margin: 7px 0 0 35px; display: inline;}
div#contact div#map div, div#map strong {color: #63656c;}

div#contact div#info {width: 476px; float: right;}
div#contact div#info p {line-height: 20px;}
div#contact div#info p.empty {line-height: 10px;}
div#contact div#info p.company {margin-bottom: 6px;}
div#contact div#info p.company span {color: #fff000; font-size: 24px;}
div#contact div#info p a {font-weight: bold; padding-left: 12px; background: url(../images/readMore.gif) no-repeat 0 4px;}
div#contact div#info p#status {color: #fff000;}

div#contact div#info form {border-top: 1px solid #5d5f62; border-bottom: 1px solid #5d5f62; padding-top: 13px; overflow: hidden;}
div#contact div#info form p {width: 210px; float: left; margin: 0 15px 5px 0;}
div#contact div#info form p.error * {color: #fff000; border-color: #fff000;}
div#contact div#info form p.legend {width: 435px; text-align: right;}
div#contact div#info form label {display: block;}
div#contact div#info form input {width: 196px;}
div#contact div#info form input.error,
div#contact div#info form textarea.error {border: 1px solid #fff000;}
div#contact div#info form textarea {width: 413px; height: 75px; overflow: auto;}
div#contact div#info form a.submit {font-weight: normal;}

/**
 * Page: technologies
 */
div#sectionTop.technologies h1 {background-image: url(../images/technologiesH1.gif); width: 257px;}

/**
 * Page: services
 */
div#sectionTop.services h1 {background-image: url(../images/servicesH1.gif); width: 131px;}

/**
 * Footer
 */
div#footer {clear: both; height: 35px; background-color: #000000; margin-top: 30px;}
div#footer * {line-height: 35px; color: #75787e; font-size: 11px;}
div#footer a {text-transform: lowercase;}
div#footer ul#bottomMenu {float: left; list-style-type: none; margin-left: 35px;}
div#footer ul#bottomMenu li {float: left; margin-right: 5px; background: url(../images/bottomMenuSeparator.gif) no-repeat right; padding-right: 10px;}
div#footer ul#bottomMenu li.last {background: none;}
div#footer div#author {float: right; margin-right: 45px;}
div#footer div#author p span.yellow {color: #fff000;}
div#footer div#author p {display: inline;}