/*
					
	Base CSS
	
*/

html, body, div, span, applet, object, iframe,
header, section, article, footer,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: #FFFFFF;
}

header, section, article, footer {
	display: block;
}

/* -------------------- */

body {
	color: #3C3C3C;
	font: 13px/24px "Trebuchet", Georgia, Times, serif;
	font-style: normal;
	font-weight: 300;
	text-align: center;
}

a:link, a:visited {
	color: #a1a3a8;
	text-decoration: none;
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

a:hover {
	color: #67708f;
	text-decoration: none;
}

h1 {
	border-bottom: 1px solid #e0e0e0;
	border-top: 5px solid #444751;
	font: 13px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 600;
	margin-bottom: 24px;
	padding: 28px 0 28px 47px;
	text-transform: uppercase;
}

h1 span { color: #a1a3a8; }

h2 {
	font: 13px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 600;
	margin-bottom: 24px;
	text-transform: uppercase;
}

section header p {
	border-bottom: 1px solid #e0e0e0;
	font-size: 20px;
	line-height: 33px;
	font-style: normal;
	font-weight: 300;
	margin-bottom: 30px;
	padding: 0 0 20px 0;
}

/* --------------------------------------------------------------------------
	=branding
--------------------------------------------------------------------------- */

#branding {
/*	border-top: 10px solid #444751;  */
	border-top: 10px solid #444751;
	margin: 0 auto;
	padding: 20px 0 0 0;
	text-align: left;
	width: 915px;
}

#branding img {
	margin-bottom: 12px;
}

#branding h1 {
	border-top: 1px solid #e0e0e0;
	border-bottom-width: 0;
	font: 23px/33px "Trebuchet", Georgia, Times, serif;
	font-style: normal;
	font-weight: 300;
	margin-bottom: 22px;
	padding: 24px 0 0 0;
	text-align: left;
	text-transform: none;
}

/* --------------------------------------------------------------------------
	=work
--------------------------------------------------------------------------- */

#work {
	padding-bottom: 90px;
}

#work header {
	margin: 0 auto;
	position: relative;
	text-align: left;
	width: 915px;
}

#work h1 {
	background: url(/theme/images/icon_work.png) no-repeat 0 50%;
	margin-bottom: 0;
}
#work h1 span {
	display:none;
}

#work header p {
	border-width: 0;
	display: none;
	font: bold 13px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 600;
	height: 29px;
	position: absolute;
	right: 0;
	text-align: right;
	text-transform: uppercase;
	top: 25px;
	width: 200px;
}

#work header p a {
	background: url(../img/icon-close.png) no-repeat 100% 0;
	display: block;
	height: 29px;
	line-height: 29px;
	padding: 0 47px 0 0;
}

#work header p a:link, #work header p a:visited {
	color: #444751;
	text-decoration: none;
}

#work header p a:hover {
	color: #a1a3a8;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
	=work list
--------------------------------------------------------------------------- */

#work-list {
	height: 1007px;
	list-style: none;
	line-height: 0;
	margin: 30px auto 0;
	position: relative;
	text-align: left;
	width: 915px;
}

#work-list li {
	position: absolute;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#work-list-better-place {
	left: 0;
	top: 0;
}
#work-list-verizon {
	left: 0;
	top: 526px;
}
#work-list-second-life {
	left: 0;
	top: 774px;
}
#work-list-wb {
	left: 310px;
	top: 0;
}
#work-list-motoactv {
	left: 310px;
	top: 248px;
}
#work-list-sonar {
	left: 310px;
	top: 774px;
}
#work-list-voda360web {
	left: 620px;
	top: 0;
}
#work-list-vodashop {
	left: 620px;
	top: 526px;
}
#work-list-sony {
	left: 620px;
	top: 774px;
}

#work-list a {
	color: #fff;
	display: block;
	font: 12px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-weight: 100;
	height: 233px;
	text-decoration: none;
	text-transform: uppercase;
	position: relative;
	width: 295px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#work-list-better-place, #work-list-better-place a {
	background: #444750 url(../img/proj-thumb-better-place.jpg) no-repeat 0 0;
}

#work-list-verizon, #work-list-verizon a {
	background: #444750 url(../img/proj-thumb-verizon.jpg) no-repeat 0 0;
}

#work-list-second-life, #work-list-second-life a {
	background: #444750 url(../img/proj-thumb-second-life.jpg) no-repeat 0 0;
}

#work-list-wb, #work-list-wb a {
	background: #444750 url(../img/proj-thumb-wb.jpg) no-repeat 0 0;
}

#work-list-motoactv, #work-list-motoactv a {
	background: #444750 url(../img/proj-thumb-motoactv.jpg) no-repeat 0 0;
}

#work-list-sonar, #work-list-sonar a {
	background: #444750 url(../img/proj-thumb-sonar.jpg) no-repeat 0 0;
}

#work-list-voda360, #work-list-voda360web a {
	background: #444750 url(../img/proj-thumb-voda360web.jpg) no-repeat 0 0;
}

#work-list-vodashop, #work-list-vodashop a {
	background: #444750 url(../img/proj-thumb-vodashop.jpg) no-repeat 0 0;
}

#work-list-sony, #work-list-sony a {
	background: #444750 url(../img/proj-thumb-sony.jpg) no-repeat 0 0;
}

#work-list a:hover {
	background-color: #323437;
}

#work-list-better-place a,
#work-list-motoactv a,
#work-list-voda360web a {
	height: 511px;
}

#work-list span.project-name {
	bottom: 0;
	display: block;
	left: 0;
	line-height: 20px;
	padding: 0 0 15px 20px;
	position: absolute;
	width: 275px;
}

#work-list span.project-extra {
	display: block;
	height: 184px;
	left: 0;
	position: absolute;
	top: 0;
	width: 295px;
}

#work-list-better-place span.project-extra,
#work-list-motoactv span.project-extra,
#work-list-voda360web span.project-extra {
	height: 462px;
}

#work-list li a span.project-extra {
	opacity: 0;
	z-index: 20;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#work-list a:hover span.project-extra {
	opacity: 1;
}

#work-list-better-place a span.project-extra, #work-list-better-place a:hover span.project-extra {
	background: url(../img/proj-thumb-better-place.jpg) no-repeat -295px 0;
}

#work-list-vodashop a span.project-extra, #work-list-vodashop a:hover span.project-extra {
	background: url(../img/proj-thumb-vodashop.jpg) no-repeat -295px 0;
}

#work-list-second-life a span.project-extra, #work-list-second-life a:hover span.project-extra {
	background: url(../img/proj-thumb-second-life.jpg) no-repeat -295px 0;
}

#work-list-wb a span.project-extra, #work-list-wb a:hover span.project-extra {
	background: url(../img/proj-thumb-wb.jpg) no-repeat -295px 0;
}

#work-list-motoactv a span.project-extra, #work-list-motoactv a:hover span.project-extra {
	background: url(../img/proj-thumb-motoactv.jpg) no-repeat -295px 0;
}

#work-list-sonar a span.project-extra, #work-list-sonar a:hover span.project-extra {
	background: url(../img/proj-thumb-sonar.jpg) no-repeat -295px 0;
}

#work-list-voda360web a span.project-extra, #work-list-voda360web a:hover span.project-extra {
	background: url(../img/proj-thumb-voda360web.jpg) no-repeat -295px 0;
}

#work-list-verizon a span.project-extra, #work-list-verizon a:hover span.project-extra {
	background: url(../img/proj-thumb-verizon.jpg) no-repeat -295px 0;
}

#work-list-sony a span.project-extra, #work-list-sony a:hover span.project-extra {
	background: url(../img/proj-thumb-sony.jpg) no-repeat -295px 0;
}

/* --------------------------------------------------------------------------
	=work details
--------------------------------------------------------------------------- */

#work-container {
	background-color: #e8e9ea;
	height: 0px;
	margin-top: -1px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

div.work-details {
	border-bottom: 1px solid #cccdce;
	border-top: 1px solid #cccdce;
	display: none;
	position: absolute;
	top: 0;
	width: 100%;
}

div.work-details section {
	margin: 0 auto;
	padding: 50px 0 65px 0;
	text-align: left;
	width: 915px;
}

div.work-details section:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.screenshots {
	border: 1px solid #cccdce;
	height: 635px;
	position: relative;
	width: 915px;
}

.screenshots ul,
.screenshots li {
	line-height: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.screenshots li {
	height: 572px;
	position: relative;
	width: 915px;
}

.screenshots img {
	left: 0px;
	position: absolute;
	top: 0px;
	z-index: 0;
}

.screenshots img.empty {
	z-index: 100;
}

.screenshots div {
	background-color: #444751;
	bottom: 0;
	color: #a2a3a8;
	font: bold 13px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 600;
	height: 63px;
	position: absolute;
	left: 0;
	width: 915px;
}

.screenshots div span {
	position: absolute;
}

.screenshots div span.control-prev {
	left: 15px;
	top: 16px;
}

.screenshots div span.control-next {
	left: 56px;
	top: 16px;
}

.screenshots div span.control-counter {
	right: 30px;
	top: 26px;
}

.screenshots div span a {
	display: block;
	height: 31px;
	text-indent: -9999px;
	width: 31px;
}

.screenshots div span.control-prev, .screenshots div span.control-prev a {
	background: url(../img/control-prev.png) no-repeat 0 0;
	height: 31px;
	width: 31px;
}

.screenshots div span.control-next, .screenshots div span.control-next a {
	background: url(../img/control-next.png) no-repeat 0 0;
	height: 31px;
	width: 31px;
}

.screenshots div span a:hover {
	background-position: 0 -31px;
}

#work h2 {
	font: 44px/44px "adelle-1","adelle-2", Georgia, Times, serif;
	font-style: normal;
	text-transform: none;
	font-weight: 300;
	margin: 0 0 20px 0;
	padding: 50px 0 0 0;
}

#work h2 span {
	color: #96989c;
	font-style: italic;
	font-weight: 300;
}

#work h3 {
	border-bottom: 5px solid #444751;
	font-size: 23px;
	line-height: 33px;
	font-style: normal;
	font-weight: 300;
	margin-bottom: 35px;
	padding: 0 0 30px 0;
}

#work article {
	float: left;
	margin-right: 40px;
	width: 270px;
}

#work article p {
	padding-top:24px;
}

#work article.detail-result {
	margin-right: 0;
}

#work article h4 {
	color: #96989c;
	font: 13px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 600;
	text-transform: uppercase;
}


#clients {
	margin: 0 auto;
	padding-bottom: 65px;
	text-align: left;
	width: 915px;
}

#clients img {
	float: left;
	margin-bottom: 40px;
}

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

#clients h1 {
	background: url(/theme/images/icon_client.png) no-repeat 0 100%;
}


#services {
	margin: 0 auto;
	text-align: left;
	padding-bottom: 90px;
	width: 915px;
}

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

#services h1 {
	background: url(/theme/images/icon_info.png) no-repeat 0 110%;
}

#services article {
	float: left;
	margin: -25px 40px 0 0;
	width: 270px;
}

#services article#services-delivery { margin-right: 0; }

#services article h2 {
	overflow: visible;
	margin-bottom: 0;
	padding: 35px 0 35px 44px;
}

#services article#services-consulting h2 {
	background: url(/theme/images/icon_consulting.png) no-repeat 0 90%;
}

#services article#services-design h2 {
	background: url(/theme/images/icon_design.png) no-repeat 0 90%;
}

#services article#services-delivery h2 {
	background: url(/theme/images/icon_delivery.png) no-repeat 0 90%;
}

#services article p, #services article ul {
	color: #696c74;
	margin-bottom: 25px;
}

#services article ul {
	margin: 0 0 0 15px;
}



#contact {
	margin: 0 auto;
	text-align: left;
	padding-bottom: 90px;
	width: 915px;
}

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

#contact h1 {
	background: url(/theme/images/icon_contact.png) no-repeat 0 110%;
}

#contact article {
	float: left;
	width: 304px;
}

#contact ul {
	list-style: none;
	margin: 0;
}

#contact a:after {
	content: url(../img/icon-arrow.png);
	position: relative;
}

#contact span.street-address {
	display: block;
}

/* --------------------------------------------------------------------------
	=footer
--------------------------------------------------------------------------- */

footer {
	background-color: #444751;
	color: #f0f0f0;
	margin: 0 auto;
	padding: 25px 35px 90px 35px;
	position: relative;
	text-align: left;
	width: 845px;
}

footer p.location {
	color: #fff;
	font-size: 19px;
	padding-top: 7px;
}