@import url("reset.css");

body,html {height:100%}
body {color:#444751; background-color:#dfe1e3; font:.75em Arial,Helvetica,'MS Sans Serif',sans-serif}
td,th {color:#444751; font:1em Arial,Helvetica,'MS Sans Serif',sans-serif}
input,textarea,option,select,button {color:#000; font:1em Arial,Helvetica,'MS Sans Serif',sans-serif}

/* // ---- typography ---- // */

a {color:#f54d00; text-decoration:underline}
a:hover {color:#444751}

.m-title {color:#e5e6e8; font:58px/1em Georgia,'Times New Roman'; padding:10px 39px 21px}

/* -- ---- typography ---- -- */

#minWidth {position:relative; min-width:1000px; background:url(/img/top-bg.png) repeat-x 0 0; height:auto !important; height:100%; min-height:100%}
.corner {position:absolute; top:0; margin-left:100%; left:-453px; width:453px; height:102px; background:url(/img/top-corner-bg.png); text-align:right}
	.corner #top-corner {margin-left:auto}

.outer {width:1000px; margin:0 auto}

.top {position:relative; height:241px}
	.top .logo {position:relative; margin-left:-93px; margin-bottom:-39px}
		.top .logo img {background:url(/img/logo-p.png)}
	.top .slogan {position:absolute; z-index:5; top:92px; left:225px; width:180px; height:16px;}

/* // ---- navigation ---- // */
.b-navigation {position:absolute; margin-left:-6px; width:1000px; margin-top:-35px; text-align:right; white-space:nowrap}
	.b-navigation li {display:-moz-inline-stack; display:inline-block; margin-right:-3px; vertical-align:top}
	.b-navigation a, .b-navigation .hr {position:relative; display:block; color:#606060; text-decoration:none; height:35px; overflow:hidden; background-color:#fff; line-height:35px; text-align:center}
		.b-navigation a:hover {color:#606060; background-color:#dfe7ed}
			.b-navigation a:hover i {top:-35px}
		.b-navigation .hr {color:#fff !important; background-color:#7f8594 !important}
			.b-navigation .hr i {top:-70px !important}
	.b-navigation a.order-site {position:absolute; top:-65px; right:0; width:57px; height:63px; background:url(/img/i-order.png) no-repeat; padding:0}
		.b-navigation a.order-site:hover {margin-top:-63px; background-color:transparent; height:126px; clip:rect(63px auto auto auto)}
	.b-navigation i {position:absolute; top:0; left:0; width:100%; height:105px}
	.b-navigation .nav-1234962003 {width:117px}
		.b-navigation .nav-1234962003 i {background:url(/img/nav-1.png)}
	.b-navigation .nav-1272373427 {width:76px}
		.b-navigation .nav-1272373427 i {background:url(/img/nav-2.png)}
	.b-navigation .nav-1234962181 {width:104px}
		.b-navigation .nav-1234962181 i {background:url(/img/nav-3.png)}
	.b-navigation .nav-1272373538 {width:61px}
		.b-navigation .nav-1272373538 i {background:url(/img/nav-4.png)}
	.b-navigation .nav-1272373562 {width:86px}
		.b-navigation .nav-1272373562 i {background:url(/img/nav-5.png)}
.b-navigation .nav-1236256225 {width:53px}
		.b-navigation .nav-1236256225 i {background:url(/img/cms.png)}
/* -- ---- navigation ---- -- */

/* // ---- visual ---- // */
.b-visual {position:relative; background:#575b65 url(/img/visual-bg.png) repeat-x 0 0; overflow:hidden}
	.b-visual .slides {position:relative; overflow:hidden; height:353px}
		.b-visual .slides ul {position:relative}
	.b-visual .slides .i {height:353px}
	.b-visual .bad, .b-visual .good {color:#e5e6e8; position:relative; }
	.b-visual .bad p, .b-visual .good p {line-height:20px; padding-top:20px}
	.b-visual .bad h2, .b-visual .good h2 {color:#fff; font:22px Georgia,'Times New Roman'; padding-top:45px}
		.b-visual .bad {background:url(/img/slide-bad-bg.png) no-repeat 92px 33px; padding:0 40px 0 290px; height:353px}
		.b-visual .bad .left-vis {display:block; padding-left:146px}
		.b-visual .bad .big {font-size:15px}
		.b-visual .good {background:url(/img/slide-good-bg.png) no-repeat 32px 38px; padding:0 40px 0 92px; height:353px}
			.b-visual .good h2 {padding-left:41px}

	.b-visual .l {position:absolute; left:-10px; width:20px; height:352px; top:50%; margin-top:-176px; background:url(/img/vis-shad-crn.png) no-repeat}
	.b-visual .r {position:absolute; margin-left:100%; left:-10px; width:10px; height:352px; top:50%; margin-top:-176px; background:url(/img/vis-shad-crn.png) no-repeat}
	.b-visual .b {position:absolute; z-index:3; left:50%; margin-left:-503px; width:1007px; bottom:0; height:9px; background:url(/img/vis-shad-b.png)}
	.b-visual .b-preview {position:relative; width:815px; height:302px; background:url(/img/vis-display.jpg) no-repeat 0 51px; padding-top:51px; margin:0 auto}
		.b-visual .ar {position:absolute; top:51px; width:70px; height:35px; background:url(/img/preview-ar.png) no-repeat}
		.b-visual .ar-l {width:35px; left:-69px; margin-top:155px}
		.b-visual .ar-r {clip:rect(auto auto auto 35px); margin-left:100%; left:-2px; margin-top:155px}
		.b-visual .b-preview-i {position:relative; overflow:hidden; padding-top:51px; width:700px; margin:0 auto; height:251px; background:url(/img/loading.gif) no-repeat 50% 160px}
		.js .b-visual .b-preview-i .shad {position:absolute; z-index:9; top:51px; left:0; width:700px; height:251px; background:url(/img/vis-shad.png)}
		.js .b-visual .b-preview-i .lt-work {position:absolute; z-index:91; top:51px; left:0; width:700px; height:251px; background-image:url(about:blank)}
		.b-visual .b-preview-i ul {position:relative;}
			.b-visual .b-preview-i ul li {float:left}
	.b-visual .b-note {position:absolute; right:44px; bottom:53px; color:#a9b0be; font-size:11px; line-height:17px; background-color:#50535e; width:291px; padding:14px 19px; border-radius:14px; -webkit-border-radius:14px; -khtml-border-radius:14px; -moz-border-radius:14px}
	.b-visual .b-service-vis {color:#e5e6e8; padding:43px 44px 49px 40px; line-height:20px}
		.b-visual .b-service-vis h2 {font:22px Georgia; padding-bottom:18px}
		.b-visual .b-service-vis p {padding-bottom:16px}
		.b-visual .b-service-vis ul {padding:0 0 0 30px}
			.b-visual .b-service-vis li {background:url(/img/li-1.gif) no-repeat 0 11px; padding:0 0 3px 22px}
	.active-badgood .b-preview {position:absolute; top:-999em; left:-999em; visibility:hidden}
	.active-badgood #good-bad-outer {visibility:visible; position:relative; top:0; left:0}
/* -- ---- visual ---- -- */

/* // ---- choose character ---- // */
.choose-character {position:relative; color:#444751; font-size:11px; line-height:16px; margin:0 0 18px; padding:29px 0 20px}
	.choose-character li {position:relative; float:left; width:483px; height:168px; margin-left:11px}
		.choose-character li .c {position:absolute; top:0; left:0; width:483px; height:168px; background-image:url(about:blank)}
		.choose-character .bad-site {background-image:url(/img/b-slide-1.png)}
			.choose-character .bad-site p {padding:55px 26px 0 125px}
			.choose-character .bad-site .i-1 {display:-moz-inline-stack; display:inline-block; width:24px; height:10px}
			.choose-character .bad-site .i-2 {display:-moz-inline-stack; display:inline-block; width:12px; height:10px}
		.choose-character .good-site {background-image:url(/img/b-slide-2.png)}
			.choose-character .good-site p {padding:55px 26px 0 25px}
/* -- ---- choose character ---- -- */

.png-brd {background:url(/img/brd-shad.png); height:10px; font-size:1px; margin-bottom:25px; margin-top:1px}

/* // ---- briefly ---- // */
.b-briefly {line-height:20px; padding:0 19px}
	.b-briefly h2 {font:22px 'Georgia','Times New Roman'; padding-bottom:18px}
	.b-briefly p {padding-bottom:20px}
	.b-briefly .l-type-1 {padding-bottom:13px}
		.b-briefly .l-type-1 .l-c-1 {float:left; width:465px}
		.b-briefly .l-type-1 .l-c-2 {float:right; font-size:11px; width:412px; text-align:center; padding-right:30px}
	.b-briefly .b-scheme-1 {width:279px; height:159px; background:url(/img/scheme-1.png); margin:0 auto 29px}
	.b-briefly .brd {font-size:1px; overflow:hidden; height:1px; background-color:#bec3c9; margin-bottom:20px}
	.b-briefly .l-type-2 {position:relative; padding:0 285px 6px 360px; height:auto !important; height:312px; min-height:312px}
		.b-briefly .l-type-2 .note {position:relative; float:right; font-size:11px; width:255px; padding-left:30px; margin-right:-285px}
		.b-briefly .l-type-2 .note-1 {position:relative; float:right; color:#444751; font-size:12px; font-style:italic; width:255px; padding-left:30px; margin-right:-285px}
		.b-briefly .l-type-2 .brd-1 {position:relative; font-size:1px; height:2px; background-color:#313438; margin-right:-115px; margin-bottom:7px}
		.b-briefly .l-type-2 h2 {position:relative; margin-right:-115px}
	.b-briefly .tibloko {position:absolute; bottom:-9px; left:0; color:#fff; font-size:11px; background:url(/img/tibloko-bg.jpg) no-repeat 45px 100%; width:330px; padding-bottom:227px}
		.b-briefly .tibloko .works {position:absolute; width:138px; height:12px; background:url(/img/link-works.png); bottom:197px; font-size:1px}
	.brd-b {position:relative; z-index:2; background:url(/img/brd-b.png); font-size:1px; height:9px; margin-bottom:38px}
/* -- ---- briefly ---- -- */

/* // ---- for editor ---- // */
.for-editor {line-height:20px}
	.for-editor h2, .for-editor h1 {color:#313438; font:22px/28px 'Georgia','Times New Roman'; padding-bottom:18px}
	.for-editor h3 {color:#444751; font:18px/24px Arial,Helvetica,'MS Sans Serif'; padding-bottom:13px}
	.for-editor p {padding-bottom:20px}
	.for-editor .small {font-size:11px}
	.for-editor .brd {font-size:1px; overflow:hidden; height:1px; background-color:#bec3c9; margin-bottom:20px}
	.for-editor .brd-1 {position:relative; font-size:1px; height:2px; background-color:#313438; margin-bottom:7px}
	.for-editor ol {list-style-type: decimal; padding:0 0 13px 38px}
		.for-editor ol ul {padding-bottom:0}
		.for-editor ol li {padding-bottom:6px}
	.for-editor ul {padding:5px 0 15px 20px}
		.for-editor ul li {background:url(/img/li.gif) no-repeat 0 9px; padding:0 0 6px 12px}
	.for-editor blockquote, .for-editor ins {font-size:11px; background-color:#fff; padding:4px 14px 3px; border-left:3px solid #bec3c9; margin:10px 0 5px 20px; display: block; text-decoration: none}
/* -- ---- for editor ---- -- */

.b-btm-info {padding-bottom:140px}
/* // ---- left opinions ---- // */
.b-opinions {position:relative; float:left; width:471px; height:140px; font-size:11px; line-height:16px; margin-right:42px}
	.b-opinions ul {position:relative; z-index:5}
	.b-opinions .pat {position:absolute; top:0; left:0; width:471px; height:118px; background:url(/img/opinions-bg.png)}
	.b-opinions li {position:relative; z-index:4; height:140px; width:471px; display:none}
		.b-opinions li p {padding:16px 20px 0 24px}
	.b-opinions small {position:absolute; left:23px; bottom:1px; color:#6f6f6f; font-size:12px; font-style:italic}
		.b-opinions small a {color:#6f6f6f}
	.b-opinions .a {display:block}
/* -- ---- left opinions ---- -- */

.b-list-articles {float:left; line-height:20px}
	.b-list-articles li {background:url(/img/li.gif) no-repeat 0 9px; padding:0 0 1px 12px}
	.b-list-articles a {color:#444751}
		.b-list-articles a:hover {color:#f54d00}

.b-read-welc {float:right; color:#444751; font-size:11px; line-height:20px; width:185px; padding-right:20px}
	.b-read-welc .read-art {display:block; width:110px; height:12px; background:url(/img/link-read.png); font-size:1px; margin-top:9px}

/* // ---- bottom ---- // */
.bottom {position:relative; z-index:2; margin:-90px auto 0; height:90px; width:1000px}

.b-contact-us {position:relative; float:left; left:20px; background:url(/img/btm-contacts-ico.png) no-repeat 0 0; height:55px; padding:35px 0 0 112px}
	.b-contact-us dt {position:absolute; z-index:1; top:0; left:32px; width:109px; height:41px; overflow:hidden}
		.b-contact-us dt a {display:block; height:41px; text-indent:-999em}
	.b-contact-us dd {position:relative; z-index:2; color:#000; font:13px Georgia,'Times New Roman'}
		.b-contact-us dd big {font-size:22px}
	.b-contact-us dd.copyright {color:#686868; font:11px Arial,Helvetica}
		.b-contact-us dd.copyright a {color:#686868; text-decoration:none}

.b-search {position:absolute; top:37px; right:75px; width:175px; height:19px; color:#000; font-size:11px; border-width:0; background:#fff url(/img/search-bg.png)}
	.b-search input {float:left; background-color:transparent; padding:3px 10px 2px; width:155px; height:14px; border-width:0}
/* -- ---- bottom ---- -- */

.btm-bg {display:block; margin-top:-300px; height:300px; background:url(/img/bottom-bg.png) repeat-x 0 0}

/* // ---- services page ---- // */
.l-serv-grid {position:relative; padding:0 10px 0 274px}
	.l-serv-grid ul.b-graph {position:absolute; top:0; left:19px; color:#fff; font-weight:bold; width:171px; height:291px; background:url(/img/scheme-2.png); padding:0 0 0 80px}
	.l-serv-grid ul.b-graph li {padding:0; background-image:none}
	.l-serv-grid ul.b-graph .n-1 {line-height:110px}
	.l-serv-grid ul.b-graph .n-2 {height:39px; line-height:39px; }
	.l-serv-grid ul.b-graph .n-3 {line-height:63px}
	.l-serv-grid ul.b-graph .n-4 {height:39px; line-height:39px}
	.l-serv-grid ul.b-graph .n-5 {line-height:35px}
	.l-serv-grid .brd {position:relative; margin-left:-274px; margin-top:10px}
	.l-serv-grid .brd-1 {margin-left:-20px; width:435px}
	.l-serv-grid h2 {margin-left:-20px}
	.l-serv-grid .b-benefits {font-size:11px; margin-left:-304px; padding:0; background:url(/img/benef-bg.png) no-repeat 0 0; height:auto !important; min-height:288px; height:288px}
		.l-serv-grid .b-benefits li {float:left; width:305px; padding:0 0 0 30px; background-image:none}
/* -- ---- services page ---- -- */

/* // ---- latest work ---- // */
.b-latest-work {color:#e5e6e8; font-size:11px; line-height:20px; padding:43px 20px 0 40px}
	.b-latest-work dt {font:22px Georgia,'Times New Roman'; padding-bottom:32px}
	.b-latest-work dd {position:relative}
	.b-latest-work .ph {position:relative; width:700px}
		.b-latest-work .ph .l-sh, .b-latest-work .ph .r-sh {position:absolute; top:0; width:10px; height:241px; background:url(/img/latest-work-shad.png) no-repeat}
		.b-latest-work .ph .l-sh {left:-10px}
		.b-latest-work .ph .r-sh {margin-left:100%; left:-10px; width:20px; clip:rect(auto auto auto 10px)}
	.b-latest-work .desc {position:absolute; top:-3px; right:0; width:22%}
	.b-latest-work .go-work {position:absolute; margin-left:100%; left:0; font-style:italic; width:117px; height:62px; line-height:60px; padding-right:40px; text-align:right; background:url(/img/go-proj.png); bottom:19px}
/* -- ---- latest work ---- -- */

/* // ---- portfolio main ---- // */
.l-portfolio-main {}
	.l-portfolio-main .l-col-1 {position:relative; float:left; width:30%; left:19px; border-top:1px solid #bec3c9}
	.l-portfolio-main .l-col-2 {float:right; width:65%}
/* -- ---- portfolio main ---- -- */

/* // ---- choose type ---- // */
.b-choose-type {font:22px Georgia,'Times New Roman'; padding:15px 0 13px}
	.b-choose-type a {color:#313438; text-decoration:none; border-bottom:1px dashed}
		.b-choose-type a:hover {color:#f54d00}
	.b-choose-type .active {color:#313438 !important; border-bottom-width:0}
	.b-choose-type .l {float:left; padding-right:12px; padding-bottom:1px}
	.b-choose-type .type-ch {position:relative; float:left; cursor:pointer; cursor:hand; width:37px; height:18px; background:url(/img/slide-filter.png); margin-right:12px; margin-top:6px}
		.b-choose-type .type-ch i {position:absolute; top:1px; margin:0 1px; left:0; width:16px; height:16px; background:url(/img/slide-filter-it.png); font-size:1px; border-bottom-width:0}
.filter-txt {}
	.filter-txt .panes {display:none}
	.filter-txt .apane {display:block}
.b-filter-works {position:relative; margin-left:-23px}
	.b-filter-works li {position:relative; float:left; width:300px; height:187px; padding:0 10px 0 23px}
	.b-filter-works a {display:block; position:relative; width:100%; text-decoration:none; overflow:hidden}
		.b-filter-works a:hover {text-indent:0}
			.b-filter-works a:hover span {display:block}
		.b-filter-works a span {position:absolute; bottom:-187px; left:0; width:100%; background-color:#fff}
			.b-filter-works a span small {display:block; color:#1a1a1a; font-size:11px; line-height:16px; padding:5px 9px}
	.b-filter-works .brands {display:none}
/* -- ---- choose type ---- -- */

/* // ---- portfolio sec ---- // */
.b-portfolio-card {padding-bottom:30px}
	.b-portfolio-card .l-col-1 {position:relative; float:left; width:63%; left:19px; border-top:1px solid #bec3c9; padding-top:15px}
	.b-portfolio-card .l-col-2 {position:relative; float:right; width:30%; right:19px; border-top:1px solid #bec3c9; padding-top:15px}
	.b-portfolio-card .l-col-3 {clear:both; text-align:center; font-style:italic; padding-top:18px;}
	.b-portfolio-card .l-col-3  p{text-align:center; font-style:italic;}

	.b-portfolio-card .img-port {padding-bottom:14px}
	.b-portfolio-card .url-site {position:relative; font-size:14px; font-weight:bold; padding:0 0 9px 28px}
		.b-portfolio-card .url-site .open-site {display:-moz-inline-stack; display:inline-block; margin:4px 0 0 8px; width:79px; height:12px; background:url(/img/link-open.png); vertical-align:top; font-size:1px; text-indent:-999em; text-decoration:none}
		.b-portfolio-card .url-site .ico-site {position:absolute; top:3px; left:0; width:16px; height:16px; font-size:1px}
/* -- ---- portfolio sec ---- -- */

.back-to {display:-moz-inline-stack; display:inline-block; width:127px; height:12px; font-size:1px; background:url(/img/link-backto.png); vertical-align:top; margin-top:9px}

/* // ---- grid 1 ---- // */
.l-grid-1 {padding-bottom:20px}
	.l-grid-1 .l-col-2 {position:relative; float:right; width:63%; right:19px; border-top:1px solid #bec3c9; padding-top:15px}
	.l-grid-1 .l-col-1 {position:relative; float:left; width:30%; left:19px; border-top:1px solid #bec3c9; padding-top:15px}
/* -- ---- grid 1 ---- -- */

.b-public-all {line-height:20px; padding-bottom:60px}
	.b-public-all dt {color:#313438; font:22px 'Georgia','Times New Roman'; padding-bottom:10px}
	.b-public-all dd {background:url(/img/li-2.gif) no-repeat 0 11px; padding:0 0 4px 20px}
	.b-public-all .hr {color:#444751; font-style:italic}

.cup-of-tea {position:relative; color:#fff; font-size:11px; line-height:20px; background:url(/img/tea.jpg) no-repeat 0 0; margin-left:-14px; padding:5px 10px 5px 152px; height:auto !important; height:78px; min-height:78px}

/* // ---- mb info ---- // */
.b-mb-info {color:#e5e6e8; line-height:20px; padding:43px 39px 45px}
	.b-mb-info h3 {font:22px 'Georgia','Times New Roman'; padding-bottom:20px}
/* -- ---- mb info ---- -- */

/* // ---- mb contact ---- // */
.b-mb-contact {color:#e5e6e8; line-height:20px; padding:43px 39px 33px}
	.b-mb-contact h3 {font:22px 'Georgia','Times New Roman'; padding-bottom:20px}
	.b-feedback {position:relative; padding-top:30px}
		.b-feedback .i {padding-bottom:11px}
		.b-feedback .i-p {float:left; border:1px solid #42495b; padding:6px 1px 6px 9px; height:15px; width:215px; background-color:#f0f0f0; margin-right:6px}
		.b-feedback .txt {position:absolute; left:255px; top:30px; width:330px}
			.b-feedback .txt textarea.i-p {width:298px; height:135px}
		.b-feedback .star {float:left; color:#f54d00; font-size:13px}
		.b-feedback .btn {display:block; margin-left:auto; margin-right:19px}
		.b-feedback .note {position:absolute; bottom:8px; left:598px; font-size:11px}
			.b-feedback .note span {color:#f54d00; font-size:13px}
/* -- ---- mb contact ---- -- */

.b-contacts {padding-bottom:30px}
	.b-contacts .l-col-2 {border-top-width:0; padding-top:0; width:60%}
	.b-contacts .map-scheme {border:4px solid #fff}
	.b-contacts .we-ya {padding-top:6px; padding-bottom:10px}
		.b-contacts .we-ya span {color:#f00}

.i-address {float:right; width:92px; height:118px; background:url(/img/i-address.png); margin-top:5px; margin-left:20px}
.i-clock {float:right; width:92px; height:92px; background:url(/img/i-clock.png); margin-top:5px; margin-left:20px}

/* // ---- list blog ---- // */
.b-list-blog {padding-bottom:20px}
	.b-list-blog li {padding-bottom:15px}
	.b-list-blog .l-col-1 {position:relative; float:left; width:30%; left:19px; border-top:1px solid #bec3c9; padding-top:15px}
	.b-list-blog .l-col-1 H2 a{color:#313438; text-decoration: none}
	.b-list-blog .l-col-1 H2 a:hover{color:#313438; text-decoration: underline}
	.b-list-blog .l-col-2 {position:relative; float:right; width:63%; right:19px; margin-top:-6px}
	.b-list-blog img {margin-top:5px}

.blog-pages {position:relative; margin-left:auto; font-size:11px; width:63%; right:19px; padding-bottom:30px}
	.blog-pages a {position:relative; display:block; width:127px; height:60px; line-height:60px; text-align:center; background-repeat:no-repeat}
		.blog-pages a:hover {color:#f54d00; text-decoration:none; text-indent:0; background-position:0 -61px}
	.blog-pages .prev-ar {float:left; left:-3px; background-image:url(/img/prev-ar.png); padding-left:15px}
	.blog-pages .next-ar {float:right; right:-3px; background-image:url(/img/next-ar.png); padding-right:15px}
/* -- ---- list blog ---- -- */
#output {color: red;}