@import url('reset-fonts-grids.css');

body {
	background: black url('background.png') repeat-x top left;
	font-family: "Lucida Grande", Lucida, Helvetica, Verdana;
	font-size: 14px;
}

p {
	margin-bottom: 16px;
	text-align: justify;
	clear: both;
}

a {
	color: #c30d52;
}

label {
	width: 160px;
	text-align: right;
	margin-right: 8px;
	display: table-cell;
	color: #53480e;
	line-height: 26px;
	clear: both;
}

input, textarea {
	border: 2px solid #b2e2f3;
	font-weight: bold;
	font-size: 16px;
	padding: 4px;
	display: table-cell;
	width: 310px;
}

textarea {
	height: 120px;
}

input.submit {
	margin-left: 168px;
}

input:focus, textarea:focus {
	border-color: #89c6db;
}

p label {
	float: left;
}

p input, p textarea {
	float: left;
}

form p {
	overflow: auto;
}

.hidden {
	display: none;
}

.column {
	width: 346px;
	overflow: auto;
}

.column .column {
	width: 310px;
}

.column.left,
.block.left,
.left {
	float: left;
}

.column.right,
.block.right,
.right {
	float: right;
}

.column.wide {
	clear: both;
	width: 713px;
}

.block {
	padding: 12px;
	margin-bottom: 18px;
	overflow: auto;
}

.column.no-gap,
.column.no-gap .block {
	margin-bottom: 0px;
}

.column.right .block,
.column.wide .block {
	margin-right: 0px;
}

.block h1,
.block h2,
.block h3 {
	font-family: Arial;
	font-size: 29px;
	font-weight: bold;
	margin-bottom: 18px;
}

.block.one {
	background: #d5f4ff;
	color: #75401c;
}

.block.one h1 {
	color: #48707e;
}

.block.two,
.block.latest-work,
.block.our-work {
	background: #fff5bf;
	color: black;
}

.block.contact-us {
	margin-bottom: 0px;
}

.block.two h3 {
	color: #48707e;
}

.block.latest-work h2,
.block.our-work h2,
.block.contact-us h2 {
	color: #4d4d4d;
	margin-bottom: 0px;
}

.block.contact-us h1 {
	color: #48707e;
}

.block.three {
	padding: 0;
}

.block.three h1 {
	color: #925b3d;
}

#doc {
	width: 757px;
	margin: 0px auto;
}

#header	{
	height: 52px;
	padding:  0px 22px;
}

#nav {
	color: #ccf1ff;
	font-size: 14px;
	float: right;
	margin-top: 13px;
}

#nav a {
	color: #ccf1ff;
	text-decoration: none;
	padding: 8px 16px;
	background: #000000;
	display: block;
}

#nav a:hover {
	color:  #2a1609;
	background: #c300e1;
}

#nav li.stickie {
	padding: 0px;
}

#nav li.stickie a {
	padding-right: 0px;
	background: none;
}

#nav li {
	float: left;
	margin-left: 18px;
}

#logo {
	margin-top: 8px;
	float: left;
}

#logo a {
    display: block;
    width: 228px;
    height: 46px;
    text-indent: -999em;
    overflow: hidden;
    background: transparent url(logo.png) center center no-repeat;
}

#logo a:hover {
    background-image: url(logo-hover.png);
}

#nav li.stickie #wedocreative-link {
    display: block;
    width: 100px;
    height: 20px;
    text-indent: -999em;
    overflow: hidden;
    background: transparent url(wedocreative-stickie.png) center center no-repeat;
}


#different {
	clear: both;
	text-align: center;
	margin-top: 8px;
	height: 269px;
	width: 699px;
	margin: 0px auto;
	position: relative;
	z-index: 1;
	overflow: hidden;
    background: transparent url(different.png) left center no-repeat;
}

#slogans {
	float: right;
	width: 280px;
	height: 262px;
	background: url('different-bg.png') no-repeat 0px 43px;
	overflow: hidden;
}

#slogans .slogan {
    display: block;
    width: 280px;
    height: 145px;
    background: transparent url(illustrating.png) center center no-repeat;
    text-indent: -999em;
    overflow: hidden;
    margin-top: 43px;
}

#slogans .creating {
    background-image: url(creating.png);
}

#slogans .innovating {
    background-image: url(innovating.png);
}

#slogans .enhancing {
    background-image: url(enhancing.png);
}

#content {
	margin-top: -57px;
	background: white;
	padding: 57px 22px;
	padding-bottom:22px;
	overflow: auto;
}

#address {
	margin-top: 352px;
	width: 224px;
	overflow: hidden;
}

#address a {
	display: block;
	width: 192px;
	height: 118px;
}

#map {
	vertical-align: bottom;
}

#contact-us-form {
	background: url('contact_form.png') no-repeat;
	height: 529px;
	color: #363432;
}

#contact-us-form form {
	margin-top: 118px;
	display: block;
	float: left;
	width: auto;
}

#contact-us-form label {
	display: none;
}

#contact-us-form input,
#contact-us-form textarea {
	background: transparent;
	width: 312px;
	height: 23px;
	line-height: 23px;
	font-size: 20px;
	margin-left: 98px;
	padding: 0px;
	border: 0px;
	color: black;
}

#contact-us-form textarea {
	height: 120px;
}

#contact-us-form #email {
	margin-top: 42px;
}

#contact-us-form #phone {
	margin-top: 1px;
}

#contact-us-form #message {
	margin-top: 2px;
	margin-left: 100px;
	height: 178px;
}

#contact-us-form #submit {
	margin-left: 102px;
	font-size: 10pt;
	background: white;
}

#latest-work {
	width: 346px;
	height: 164px;
	overflow: hidden;
	margin-bottom: 18px;
}

#get-in-touch {
	padding-top: 32px;
	overflow: hidden;
}

#latest-work li {
	float: left;
	width: 164px;
	height: 164px;
}

#latest-work li.first {
	margin-right: 18px;
}

#latest-work li a {
	display: block;
	background: #ffe5af;
	padding: 5px;
}

#latest-work li a:hover {
	background: #4dee6b;
}

#our-services .block {
	background: #ffebc2;
}

#our-services ul li h3 {
	font-size: 14px;
	margin-bottom: 0;
	background: white;
	display: inline;
}

#job-board h1 {
	position: relative;
}

#job-board h1 a {
	position: absolute;
	top: 0;
	right: 0;
}

#jobs-feed .item,
#blog-feed .item {
	font-size: 14px;
	margin-bottom: 9px;
}

#jobs-feed .item a,
#blog-feed .item a {
	font-size: 8pt;
	color: #808080;
}

#blog-feed .item a {
	color: white;
}

#jobs-feed .item a:hover,
#jobs-feed .item a:hover .title,
#jobs-feed .item a:hover .company,
#jobs-feed .item a:hover .date {
	text-decoration: underline;
}

#blog-feed .item a:hover,
#blog-feed .item a:hover .title,
#blog-feed .item a:hover .company,
#blog-feed .item a:hover .date {
	text-decoration: underline;
}

#jobs-feed .title,
#blog-feed .title {
	color: #404040;
	font-weight: bold;
}

#blog-feed .title {
	color: white;
}

#jobs-feed .company {
	color: #808080;
	font-weight: bold;
}

#jobs-feed .date {
	color: #808080;
}

#blog-feed {
	width: 336px;
	padding: 0;
	padding-bottom: 10px;
	background: url('blog-posts-bottom.png') no-repeat bottom;
}

#blog-feed h1 {
	margin: 0;
}

#blog-feed ul {
	background: #1c6491 url('blog-posts-top.png') no-repeat top;
	overflow: auto;
	padding: 12px;
	padding-top: 35px;
	padding-bottom: 0px;
}

#blog-feed ul li {
	color: white;
}

#blog-feed a,
#blog-feed .title,
#blog-feed .date, {
	color: white;
}

#error, #message {
	font-size: 20px;
	color:  red;
}

#message {
	color: #9a1346;
}

#footer {
	color: white;
	height: 169px;
	background: url('footer.png');
}

#footer .block {
	padding: 16px 32px;
	padding-bottom: 0;
}

#footer .column {
	font-size: 8pt;
}

#footer a {
	color: white
}

#footer a:hover {
	background: white;
	color: #C30D52;
}

#footer h1 {
	color: #ffea8a;	
	font-size: 18px;
}

#footer ul li {
	padding-left: 8px;
}

#footer p {
	margin-bottom: 8px;
}

.pictures {
	overflow: hidden;
}

.pictures li {
	margin-bottom: 16px;
	overflow: hidden;
	float: left;
	margin-left: 4px;
}

.pictures li a {
	display: block;
	background: #ffe5af;
	padding: 5px;
	overflow: hidden;
	height: 164px;
	width: 164px;
}

.pictures li a:hover {
	background: #9a1346;
}

.description {
	width: 527px;
	overflow: auto;
}

.description .block {
	padding: 0px;
}

.description .block p {
	color: #53480e;
}

.description h1 {
	background: #d5f4ff;
	position: relative;
	color: #48707e;
}

.description h1 span {
	color: #48707e;
	font-size: 14px;
	position: absolute;
	right: 8px;
	top: 10px;
	font-weight: normal;
}

.description p.more a {
	color: #53480e;
	background: #d5f4ff;
	font-weight: bold;
	text-decoration: none;
}

.description p.more a:hover {
	background: #fff5bf;
}

h2.who-are-we,
h2.what-do-we-do,
h2.our-work,
h2.our-services,
h2.latest-work,
h2.latest-blog-entries,
h2.job-board {
    text-indent: -999em;
    overflow: hidden;
    height: 24px;
    background: transparent url(h_who-are-we.png) left center no-repeat;
}

h2.what-do-we-do {
    background-image: url(h_what-do-we-do.png);
}

h2.our-work {
    background-image: url(h_our-work.png);
    margin-bottom: 0px;
}

h2.our-services {
    background-image: url(h_our-services.png);
}

h2.latest-work {
    background-image: url(h_latest-work.png);
    margin-bottom: 0px;
}

h2.latest-blog-entries {
    height: 31px;
    background-image: url(h_latest-blog-entries.png);
    position: relative;
}

.feed {
    display: block;
    width: 28px;
    height: 28px;
    background: transparent url(feed-icon-28x28.png) center center no-repeat;
    text-indent: -999em;
    overflow: hidden;

    position: absolute;
    right: 0px;
    top: 0px;
}

h2.job-board {
    height: 28px;
    background-image: url(h_job-board.png);
    position: relative;
}

#get-in-touch a {
    display: block;
    width: 345px;
    height: 220px;
    text-indent: -9999px;
    overflow: hidden;
    background: transparent url(get-in-touch.png) center center no-repeat;
}

.map {
    height: 16px;
    padding-left: 20px;
    background: transparent url(map.png) left center no-repeat;
}