/*   GLOBAL   */
*, html { margin: 0; padding: 0; }
html, body { min-height: 100%; height: 100%; }
body { width: 100%; min-width: 1000px; position: absolute; top: 0px; left: 0px; background: url('img/body_bg.png') top left repeat-x; text-align: center; }
body.inside { background: url('img/body_inside_bg.png') top left repeat-x; }
html>body { height: auto; }
h2 { font-size: 18px; }
h3 { font-size: 14px; margin-bottom: 15px; }
body, div, input, textarea { font-family: arial, verdana; font-size: 12px; color: #1c2024; }
img { border: 0; }

#content { position: absolute; top: 0; left: 50%; width: 820px; min-height:99%; height: auto !important; height: 99%; margin-left: -499px; padding: 0 90px; background: url('img/content_bg.png') left top no-repeat; }
body.inside #content { background: url('img/content_inside_bg.png') top no-repeat; }

.main { float: left; clear: both; width: 100%; padding-top: 28px; padding-bottom: 161px; text-align: left; }
.inside .main { padding-top: 40px; padding-bottom: 161px; }
.main a { color: #fe0079; }
a.anchor { color: #1c2024; }

.content { float: right; width: 580px; padding: 0; }
.content p { margin-bottom: 15px; }
.content ul { margin-top: 10px; margin-bottom: 15px; clear: both; overflow: auto; }
.content li ul { margin-bottom: 0px; }
.content li { padding: 0 0 7px 20px; list-style-type: none; background: url('img/content_list_bullet.gif') left top no-repeat;  }

a.back_link { float: right; clear: both; width: 580px; margin: 40px 0; }
a.back_link img { margin-left: -15px; padding-right:3px; }

 /* Header */
#header {  height: 107px; padding-top: 36px; float: left; clear: both; width: 100%; }
.inside #header{ height: 96px; }
#logo img { float: left; }
#lang { position: absolute; top: 55px; right: 90px; width: 100px; font-size: 11px; }
#lang a { float: right; width: 27px; height: 21px; padding-top: 3px; margin: 0 1px; color: white; }
#lang .selected { background: url('img/lang_selected.gif') top center no-repeat; color: #92a2ae; text-decoration: none; }

/*  Top menu */
#menu { position: absolute; top: 55px; left: 319px; float: left; z-index: 200; }
#menu li { position: relative; float: left; display: inline; margin: 0; cursor: pointer; }
#menu li a.item { float: left; height: 22px; padding: 5px 12px 0 12px; color: white; font-size: 13px; cursor: pointer; }
#menu li.selected { background: url('img/menu_button_left.gif') left no-repeat;}
#menu li.selected a.item { background: url('img/menu_button_right.gif') right no-repeat; text-decoration: none; color: #181c1f; }

#menu li.has_children.opened { background: url('img/submenu_button_left.gif') top left no-repeat; }
#menu li.has_children.opened a.item { height: 29px; background: url('img/submenu_button_right.gif') top right no-repeat; text-decoration: none; color: #181c1f; }

#menu .submenu { display: none; position: absolute; left: 0; top: 34px; width: 202px; padding: 0; margin: 0; background: url('img/submenu_bg_top.gif') top left no-repeat; text-align: left; }
#menu .submenu div { float: left; clear: both; display: inline; padding: 0; margin: 0 3px 0 3px; background: none; }
#menu .submenu div a.subitem { float: left; width: 184px; padding: 7px 6px 7px 6px; margin: 0; color: #1b1f23; background: none; font-size: 12px; }
#menu .submenu div.selected, #menu .submenu div.aselected { background: url('img/submenu_selected_top.gif') top left no-repeat; color: #3d4951; }
#menu .submenu div.selected a.subitem, #menu .submenu div.aselected a.subitem { background: url('img/submenu_selected_bottom.gif') bottom no-repeat; color: #3d4951; text-decoration: none; }
#menu .submenu span { float: left; clear: both; position: relative; bottom: -4px; width: 100%; margin: 0; padding: 0 0 4px 0; background: url('img/submenu_bg_bottom.gif') bottom no-repeat; }

/* Footer */
#footer {  position: absolute; left: 90px; bottom: 0px; float: left; clear: both; width: 100%; height: 124px; width: 820px; padding-top: 33px; border-top: 4px solid #bfc5c9; text-align: left; }
#footer .copyright { float: left; width: 240px; padding-top: 6px; color: #969ea4; }
#footer .contacts { float: left; position: absolute; left: 240px; width: 500px; line-height: 1.5; color: #50534e; }
#footer .contacts div, #footer a { color: #50534e; }
#footer .contacts h2 { margin-bottom: 9px; padding-left: 0px; color: #1c2024; }
#footer .contacts img { padding-right: 9px; }
#footer .contacts .line { position: relative; float: left; padding-right: 55px; font-size: 11px; }
#footer .contacts .underline { position: relative; float: left; padding-left: 18px; text-decoration: underline; font-size:11px; }
#footer .skype { position: absolute; float: left; width: 18px; height: 17px; margin-left: -25px; background: url('img/skype_ico.png') no-repeat; }

/* Bread crubmbs */
h2.bread_crumbs { float: right; width: 580px; padding-bottom: 18px; }
h2.bread_crumbs a { color: #1c2024; }

/* Inner menu */
#inner_menu { float: left; width: 214px; }
#inner_menu div { width: 206px; padding: 5px 0 5px 0; margin: 5px 0 10px 0; }
#inner_menu div a { font-size: 14px; }
#inner_menu .selected { position: relative; left: -8px; width: 214px; background: url('img/inner_menu_top.gif') top left no-repeat; padding: 0; }
#inner_menu .selected a { display: block; position: relative; width: 206px; padding: 4px 0 6px 8px; bottom: -3px; background: url('img/inner_menu_bottom.gif') bottom left no-repeat; overflow: visible; color: #1c2024; text-decoration: none; }

/* Main page - WORKS */
#works { position: relative; float: left; width: 100%; height: 258px; padding: 13px 0 0 20px; overflow: visible; }
#works h2 { float: left; padding-left: 14px; color: white;  }
#works .view_all { position: relative; float: right; padding-top: 5px; margin-right: 50px; vertical-align: bottom; }
#works .view_all a { color: #0098e4; }
#works .view_all span { float: left; position: absolute; top: 2px; right: -14px; font-size: 9px; color: #c9cccf; }

#works .projects { float: left; clear: both; width: 798px; height: 200px; padding: 20px 0 0 0; margin: 0; position: relative; /*leave this value alone*/ overflow: hidden; /*leave this value alone*/ }
#works .projects .item_list { position: absolute; /*leave this value alone*/ left: 0px; }
#works .item { width: 238px; padding: 0 14px; float: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ }
#works .item img { width: 230px; height: 130px; padding: 3px; background-color: white; }
#works .item p { margin-top: 20px; color: gray; text-align: left; }

#works #works_prev { position: absolute; left: -31px; top: 95px; display: block; width: 31px; height: 46px; background: url('img/works_arrow_left.png') no-repeat; }
#works #works_prev.inactive { background-image: url('img/works_arrow_left_inactive.png'); }
#works #works_next { position: absolute; right: -31px; top: 95px; display: block; width: 31px; height: 46px; background: url('img/works_arrow_right.png') no-repeat; }
#works #works_next.inactive { background-image: url('img/works_arrow_right_inactive.png'); }

/* Main page */
#main .center h2 { padding-bottom: 16px; }
#main .center { width: 340px; margin-left: 240px; padding-bottom: 30px; }

#main .left{ float: left; width: 200px; padding-bottom: 30px; }
#main .left h2 { padding-bottom: 18px; }
#main .left ul { list-style: none; }
#main .left li { margin-bottom: 7px; }

#main .right { float: right; width: 180px; padding-bottom: 30px; }
#main .right h2 { padding-bottom: 13px; }
#main .right p { margin-bottom: 8px; }
#main .right a { margin-right: 3px; }

#main .clients { clear: both; width: 820px; height: 73px; padding-top: 20px; border-top: solid #c0c6ca 1px; }
#main .clients .label { float: left; width: 100px; margin-right: 60px; text-align: left; text-decoration: underline; font-size: 18px; font-weight: bold; color: #1c2024; }
#main .clients .label span { position: absolute; margin-right: -23px; }
#main .clients img { float: left; margin-right: 40px; }

/* Portfolio */
#portfolio .filter { float: left; padding-bottom: 27px; }
#portfolio .filter .label { float: left; margin-right: 8px; margin-top: 4px; }
#portfolio .filter .value { float: left; margin-top: 0px; }
#portfolio .filter .value span { float: left; height: 22px; padding: 4px 8px 0 8px; }
#portfolio .filter .value.selected { background: url('img/project_filter_bg_left.gif') top left no-repeat; }
#portfolio .filter .value.selected span { background: url('img/project_filter_bg_right.gif') top right no-repeat; }
#portfolio .filter .value.selected.tags span { padding-right: 23px; background: url('img/project_filter_bg_right_tags.gif') top right no-repeat; }
#portfolio .filter .tags { position: relative; z-index: 9; }
#portfolio .filter .tags a.item { float: left; color: #fe0079; border-bottom: 1px dashed #fe0079; text-decoration: none; }
#portfolio .filter div.selected a.item { color: #161b1e; border-color: #161b1e; text-decoration: none; }
#portfolio .filter .tags span { float: left; padding-right: 16px; background: url('img/project_filter_arrow.gif') right no-repeat; }
#portfolio .filter .tags .tags-inner { display: none; position: absolute; top: 25px; left: 0px; width: 178px; background: url('img/project_tags_bg_bottom.png') bottom no-repeat; z-index: 2; }
#portfolio .filter .tags ul { width: 168px; margin: 0 0 7px 0; padding: 19px 5px 4px 5px; background: url('img/project_tags_bg_top.png') top no-repeat; overflow: auto; list-style-type: none; }
#portfolio .filter .tags ul li { float: none; padding: 0; background: none; }
#portfolio .filter .tags ul li div { margin-top: 1px; padding: 0; background: none; }
#portfolio .filter .tags ul li div a { display: block; padding: 2px 10px; color: #f9fdff; background: none; }
#portfolio .filter .tags ul li.selected div { background: url('img/project_tag_bg_selected_top.gif') top no-repeat; }
#portfolio .filter .tags ul li.selected div a { background: url('img/project_tag_bg_selected_bottom.gif') bottom no-repeat; color: #161b1e; text-decoration: none; }

/* Portfolio projects */
#portfolio .projects { float: left; width: 810px; min-height: 210px; margin: 0 auto; position: relative; /*leave this value alone*/ overflow: hidden; /*leave this value alone*/ }
#portfolio .projects .item_list { position: absolute; /*leave this value alone*/ }
#portfolio .projects.clients { padding-top: 10px; }
#portfolio .projects div.three { float: left; padding: 0 0 25px 0; height: 210px; overflow: hidden; }
#portfolio .projects div.item { float: left; width: 240px; height: 210px; padding: 0 15px; text-align: left; }
#portfolio .projects div.item img { width: 230px; height: 130px; padding: 3px; background-color: white; border: 1px solid #e4e8ec; }
#portfolio .projects div.item .title, #portfolio .projects div.item span { display: block; padding-top: 10px; margin: 0 4px; }
#portfolio .projects div.item .title { color: #fe0079; }
#portfolio .projects div.item span { color: #1c2024; }
#portfolio .projects.clients div.item .title, #portfolio .projects.clients div.item span { text-align: center; }
#portfolio .projects .screen { width: 810px; float: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ }

#portfolio .paging { clear: both; width: 780px; height: 40px; padding-top: 20px; margin: 0 0 0 15px; border-top: 1px solid #caced1; text-align: center;  }
#portfolio .paging a { display: inline-block; padding: 0; }
#portfolio .paging a#portfolio_prev { width: 16px; height: 19px; padding-right: 14px; }
#portfolio .paging a#portfolio_next { width: 16px; height: 19px; padding-left: 14px; }
#portfolio .paging a#portfolio_prev.inactive { background: url('img/portfolio_arrow_left.gif') top left no-repeat; }
#portfolio .paging a#portfolio_prev { background: url('img/portfolio_arrow_left_free.gif') top left no-repeat; }
#portfolio .paging a#portfolio_next.inactive { background: url('img/portfolio_arrow_right.gif') top right  no-repeat; }
#portfolio .paging a#portfolio_next { background: url('img/portfolio_arrow_right_free.gif') top right no-repeat; }
#portfolio .paging a.page { width: 12px; height: 19px; padding: 0 3px; background: url('img/portfolio_bullet.gif') center  no-repeat; }
#portfolio .paging a.page.selected { background: url('img/portfolio_bullet_selected.gif') center no-repeat; }

/* Portfolio selected project */
#project { position: relative; }
#project .content { padding-bottom: 40px; }
#project .tags { padding-bottom: 15px; }
#project .url { padding-bottom: 15px; }
#project .picture { clear: both; width: 100%; margin-bottom: 40px; overflow: auto; text-align: center; }
#project .picture img { border: 3px solid #e4e8ec; }
/*#project .picture img { float: left; margin-left: 20px; border: 3px solid #e4e8ec; }*/
#project .picture div.description { float: right; width: 140px; padding: 140px 20px 0 0; }
#project .description_bottom { float: right; clear: both; width: 580px; margin-bottom: 40px; }
#project a.back_link { margin-top: 0; }

#project #works_prev { position: absolute; left: -31px; top: 40px; display: block; width: 31px; height: 46px; background: url('img/works_arrow_left.png') no-repeat; }
#project #works_prev.inactive { background-image: url('img/works_arrow_left_inactive.png'); }
#project #works_next { position: absolute; right: -31px; top: 40px; display: block; width: 31px; height: 46px; background: url('img/works_arrow_right.png') no-repeat; }
#project #works_next.inactive { background-image: url('img/works_arrow_right_inactive.png'); }

/*  Contacts    */
#map { z-index: 2; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('img/map_bg.png') top left repeat; }
#map_content { position: relative; width: 860px;  margin: 0 auto; text-align:left; }
#map iframe { position: absolute; top: 111px; width: 821px; height: 478px; margin:0 auto; border: 3px solid white;  }
#map a.close { position: absolute; top: 79px; right: 0px; width:31px; height:31px;  background: url('img/map_button.png') no-repeat; }

#contacts .content { width: 400px; margin-right: 180px; }
#contacts form { padding-bottom: 20px; }
#contacts form .field { clear: both; width: 650px; padding: 5px 0 5px 0; height: auto; min-height: 20px; }
#contacts form label { float: left; width: 225px; padding: 2px 15px 0 0; text-align: right; }
#contacts form .value { float: left; }
#contacts form .form_error { clear: both; padding: 0 190px 8px 240px; color: #fe0079; }
#contacts form .field_error { float: left; padding-top: 2px; color: #fe0079; }
#contacts form input.text { float: left; width: 150px; margin-right: 10px; }
#contacts form input.text.long { width: 340px; }
#contacts form textarea { float: left; clear: right; width: 340px; height: 120px; margin-bottom: 5px; }
#contacts form div.long { width: 340px; }
#contacts form input.text.short { float: left; clear: both; }
#contacts form .captcha { float: left; clear: both; margin: 5px 0 0 240px; }
#contacts form input.button { margin: 5px 0 0 240px; }

#contacts .info { position:absolute; left: 750px; float: right; width: 160px; }
#contacts .info h2 { clear: both; display: block; padding: 20px 0 14px 0; width: 100%; }
#contacts .info .requisite_link { float: left; padding-right: 13px; background: url('img/details_arrow_down.gif') bottom right no-repeat; }
#contacts .info .requisite_link a { display: block; color: #fe0079;  border-bottom: 1px dashed #fe0079; font-size: 18px; text-decoration: none; }
#contacts .info .requisite { display: none; position: absolute; top: 25px; left: -20px; width: 260px; padding-bottom: 5px; background: url('img/contacts_requisite_bg_bottom.png') bottom left no-repeat; }
#contacts .info .requisite div { margin: 0; padding: 17px 15px 6px 15px; color: white; line-height: 18.5px; background: url('img/contacts_requisite_bg_top.png') top left no-repeat; }
#contacts .info .map_link { display: none; }