@charset "UTF-8";



	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, 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,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}


/* misc
----------------------------------------------------------*/

	body{
		position: relative;
		background: #ffffff;
		font: 11px/1.5 Arial, Helvetica, sans-serif;
		color: #fff;
		width: 100%;
		height: 100%;
		min-width: 1100px;
	}
	
	h1, h2, h3, h4{
		font-weight: bold;
		font-family: Georgia, "Times New Roman", Times, serif;
	}
	
	a{
		text-decoration: none;
		outline: none;	
	}
	a:hover,
	a:active{text-decoration: underline;}
	
	.img{
		display: block;
		background-repeat: no-repeat;
		text-indent: -999px;
		overflow: hidden;
	}
	
	.clear{
		height: 1px;
		line-height: 1px;
		font-size: 1px;
		clear: both;	
	}
	
	#bgBody{
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
		#bgBody img{
			position: relative;	
		}

	#pageWrap{
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}
		#pageWrap #page{
			width: 750px;
			margin: 0 auto;
			z-index: 10;
		}
		
	::-moz-selection{
		background: #a2d34e;
		color: #fff;
		text-shadow: none;	
	}
	::selection {
		background: #a2d34e;
		color: #fff;
		text-shadow: none;
	}
	

/* navigation block
----------------------------------------------------------*/

	nav{
		position: absolute;
		top: 75px;
		left: 55px;
		z-index: 100;
	}
		nav h1{
			margin: 0 0 15px 33px;
		}
		nav h1,
		nav h1 a{
			display: block;
			width: 157px;
			height: 46px;
		}
			nav h1 a{
				background: url("img/logo.png") 0px 0px no-repeat;
				text-indent: -999px;	
			}
	nav menu{
		list-style: none;	
	}
		nav menu li{
			margin: 0 0 2px 0;	
		}
			nav menu li a{
				font: 17px/1 Georgia, "Times New Roman", Times, serif;
				color: #a5a5a5;
				padding: 0 0 0 32px;
				letter-spacing: -1px;
			}
			nav menu li a:hover,
			nav menu li a:active{
				color: #e60000;
				text-decoration: none;
			}
		
		nav menu li.home{}
			nav menu li.home a{
				width: 29px;
				height: 28px;
				background: url("img/sprite_navigation-home.png") 0px 0px no-repeat;
				margin: 0 0 0 32px;
			}
			nav menu li.home a:hover,
			nav menu li.home a:active{
				background-position: 0px -28px;
			}
			
			nav menu li h2{
				padding: 0 0 0 0;
				margin: 0 0 0 0;
				line-height: 1;	
			}
				nav menu li h2 a{
					color: #6b6b6b;
					font-size: 27px;
					background: url("img/sprite_navigation-marker.png") 0px 4px no-repeat;	
				}
				nav menu li h2 a:hover,
				nav menu li h2 a:active{
					background-position: 0px -23px;	
					color: #6b6b6b;
				}
			

/* contact block
----------------------------------------------------------*/

	footer{
		text-align: right;
		margin: 25px;
		position: absolute;
		bottom: 0px;
		right: 0px;
		z-index: 100;
	}
	
		footer,
		footer a{
			color: #737373;	
		}
		
		footer a:hover,
		footer a:active{
			color: #e60000;	
			text-decoration: none;
		}
	
		footer .contacts{
			float: right;
		}
	
			footer .contacts h3{
				font-size: 15px;
				text-align: right;	
			}
			
			footer .contacts h4{
				font: 12px/1.25 Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
				line-height: 1;
				text-align: right;
			}
		
		footer p{
			margin: 0 0 0 0;
		}
			
			footer .telemail{
				clear: right;
				margin: 0 0 18px 0;
				padding: 24px 0 0 0;
			}
			
			footer .backhome{
				float: right;
				width: 31px;
				height: 29px;
				background: url("img/sprite_telemail_backhome.png") 0px 0px no-repeat;
				margin: 5px 0 0 9px;	
			}
			footer a.backhome:hover,
			footer a.backhome:active{
				background-position: 0px -29px;	
			}
			
			footer .social{
				float: right;	
			}
			
			footer .social,
			footer .social li{list-style: none;}
			
				footer .social li{
					display: block;
					width: 24px;
					height: 23px;
					float: right;
					margin: 0 2px;
				}
	
				footer .social .twitter{}
					footer .social .twitter a{background-position: -24px 0px;}
					footer .social .twitter a:hover,
					footer .social .twitter a:active{background-position: -24px -23px;}

				footer .social .facebook{}
					footer .social .facebook a{background-position: 0px 0px;}
					footer .social .facebook a:hover,
					footer .social .facebook a:active{background-position: 0px -23px;}

				footer .social a.img{
					height: 0px;
					padding: 23px 0 0 0;
					width: 24px;
					background-image: url("img/bg_footer_social.png");				
				}


/* homepage montage
----------------------------------------------------------*/

body.home #pageWrap #page{
	padding: 0 84px 0 0;	
}

	ul#montage{
		display: block;
		width: 485px;
		height: 540px;
		background: url("img/loading.gif") 50% 50% no-repeat;
		margin: 130px auto 25px;
		position: relative;
	}

	ul#montage,
	ul#montage li{
		list-style: none;	
	}
	
		ul#montage li{
			position: absolute;	
		}
	
		ul#montage li,
		ul#montage li a{
			display: block;
			border: none;
		}
			ul#montage li a.img{
				background-image: url("img/sprite_homepage_montage.png");
			}
			ul#montage li.loading{
				display: none;
			}
	
		ul#montage li.about{
			top: 165px;
			left: -75px;
		}
	
		ul#montage li.about,
		ul#montage li.about a{
			width: 234px;
			height: 152px;
		}
			ul#montage li.about a{
				background-position: -53px 0px;	
			}
			ul#montage li.about a:hover,
			ul#montage li.about a:active{
				background-position: -53px -147px;	
			}
	
		ul#montage li.creations{
			top: 228px;
			left: 426px;
		}
	
		ul#montage li.creations,
		ul#montage li.creations a{
			width: 225px;
			height: 228px;
		}
			ul#montage li.creations a{
				background-position: -286px 0px;	
			}
			ul#montage li.creations a:hover,
			ul#montage li.creations a:active{
				background-position: -284px -228px;
				height: 240px;
			}
		
		ul#montage li.facebook{
			top: 305px;
			left: 185px;
		}
			
		ul#montage li.facebook,
		ul#montage li.facebook a{
			width: 53px;
			height: 67px;
		}
			ul#montage li.facebook a{
				background-position: 0px 0px;	
			}
			ul#montage li.facebook a:hover,
			ul#montage li.facebook a:active{
				background-position: 0px -67px;	
			}

		ul#montage li.contact{
			top: 35px;
			left: 55px;
		}
			
		ul#montage li.contact,
		ul#montage li.contact a{
			width: 65px;
			height: 65px;
		}
			ul#montage li.contact a{
				background-position: 0px -360px;	
			}
			ul#montage li.contact a:hover,
			ul#montage li.contact a:active{
				background-position: 0px -280px;	
			}
			
		ul#montage li.twitter{
			width: 195px;
			bottom: 325px;
			left: 410px;
		}

			ul#montage li.twitter .top,
			ul#montage li.twitter .middle,
			ul#montage li.twitter .bottom{
				display: block;
				width: 100%;
				background-image: url("img/sprite_homepage_montage.png");
			}
			
			ul#montage li.twitter .top{
				height: 10px;
				background-position: -80px -300px;		
			}
			ul#montage li.twitter .bottom{
				height: 21px;
				background-position: -80px -310px;
			}
			
			ul#montage li.twitter .middle{
				background: url("img/bg_homepage_twitter-middle.png") 0px 0px repeat-y;
				padding: 5px 0px 5px 14px;	
			}
			
				ul#montage li.twitter .middle h3{
					font-weight: normal;
					font-size: 18px;	
				}

				ul#montage li.twitter .middle .img{
					width: 24px;
					height: 24px;
					background-position: 0px -160px;
					float: left;
					margin: 0 8px 0 0;	
				}

				ul#montage li.twitter .middle p{
					color: #fff;
					font-size: 10px;
					padding-right: 10px;
				}
				
					ul#montage li.twitter .middle p a{
						color: #fff;
						text-decoration: underline;	
					}
					ul#montage li.twitter .middle p a:hover,
					ul#montage li.twitter .middle p a:active{
						text-decoration: none;
						color: #686868;
					}
				
				ul#montage li.twitter .middle .date{
					color: #857a7a;
					font-family: Georgia, "Times New Roman", Times, serif;	
				}
				
				ul#montage li.twitter .middle a.btmlink{
					font-family: Georgia, "Times New Roman", Times, serif;
					color: #686868;
					font-size: 12px;
				}
				ul#montage li.twitter .middle a.btmlink:hover,
				ul#montage li.twitter .middle a.btmlink:active{
					text-decoration: none;
					color: #e60000;
				}
				
				ul#montage li.twitter .middle .contents{
					float: left;
					width: 135px;
				}

/* internal pages
----------------------------------------------------------*/

		
	/* contact */
	body.home #pageWrap #page{
		padding: 0 21px 0 0;	
	}
		
	body.contact{}
		body.contact .centreMe .redBubble{
			margin: 0 0 0 455px;	
		}
	
		body.contact .centreMe p{
			font-family: Georgia, "Times New Roman", Times, serif;
		}
			body.contact .centreMe p span{
				float: left;
				color: #737373;
				vertical-align: baseline;
			}
			
			body.contact .centreMe p span.contactLabel{
				font-size: 14px;
				color: #545454;	
				width: 100px;
			}
			
			body.contact .centreMe p span.contactDetails{}
				body.contact .centreMe p span.contactDetails a{
					color: #737373;	
				}
				body.contact .centreMe p span.contactDetails a:hover,
				body.contact .centreMe p span.contactDetails a:active{
					text-decoration: none;
					color: #e60000;	
				}
					body.contact .centreMe p span.contactDetails a strong{
						font-weight: bold;	
					}
			
		body.contact .centreMe p.telephoneNumber{
			padding: 0 0 0 160px;	
		}
			body.contact .centreMe p.telephoneNumber span.contactLabel{
				margin-top: 20px;	
			}
			body.contact .centreMe p.telephoneNumber span.contactDetails{
				font-size: 32px;
				letter-spacing: -1px;
				font-weight: bold;
			}
						
		body.contact .centreMe p.emailAddress{
			padding: 0 0 0 160px;	
		}
			body.contact .centreMe p.emailAddress span.contactLabel{
				margin-top: 13px;	
			}
			body.contact .centreMe p.emailAddress span.contactDetails{
				font-size: 26px;
				font-family: Arial, Helvetica, sans-serif;	
			}
		body.contact .centreMe ul{
			clear: both;
			margin: 0 0 0 260px;
			padding: 20px 0 0 0;
		}
			body.contact .centreMe ul li{
				float: left;
			}
			body.contact .centreMe ul li,
			body.contact .centreMe ul li a{
				display: block;
				width: 43px;
				height: 43px;
			}
				body.contact .centreMe ul li a{
					background-image: url("img/sprite_contact-social.png");	
				}
			
			body.contact .centreMe ul li.facebook{
				margin: 0 15px 0 0;	
			}
				body.contact .centreMe ul li.facebook a{
					background-position: 0px 0px;	
				}
				body.contact .centreMe ul li.facebook a:hover,
				body.contact .centreMe ul li.facebook a:active{
					background-position: 0px -43px;
				}
			
				body.contact .centreMe ul li.twitter a{
					background-position: -43px 0px;	
				}
				body.contact .centreMe ul li.twitter a:hover,
				body.contact .centreMe ul li.twitter a:active{
					background-position: -43px -43px;
				}
	/* about */	
	body.about{}
		body.about .centreMe{
			color: #545454;
			font-family: Georgia, "Times New Roman", Times, serif;
		}
		body.about .centreMe h3{
			font-size: 13px;
			font-weight: normal;
			margin: 15px 0 0 0;
			line-height: 1;
		}
			body.about .centreMe h3 span.logo{
				display: inline-block;
				width: 116px;
				height: 34px;
				background-image: url("img/bg_about-logo.png");
				vertical-align: bottom;
			}
			body.about .centreMe h3 span.creative{
				color: #282828;
				font-size: 30px;
				letter-spacing: -1px;
			}
			body.about .centreMe h3 span.digiDesign{
				font-size: 20px;
				letter-spacing: -1px;
			}
		body.about .centreMe h4{
			margin: 50px 0 0 0;
			letter-spacing: -1px;
		}
			body.about .centreMe h4 span{
				font-size: 18px;	
			}
		
		body.about .centreMe p{
			line-height: 16px;
			overflow: visible;	
		}
			body.about .centreMe p span.largeGrey{
				font-size: 18px;	
			}
			body.about .centreMe p span.xlargeGrey{
				font-size: 23px;
			}
			body.about .centreMe p span.xlargeBlack{
				font-size: 23px;
				color: #282828;
			}
			
		body.about .centreMe ul{
			margin: 23px 0 0 0;
			vertical-align: middle;
		}
		body.about .centreMe ul li{
			float: left;
			margin: 0 16px 0 0;
		}
			body.about .centreMe ul li img{
				vertical-align: middle;
			}
			
			
	/* creations */	
	body.creations{}
		body.creations #pageWrap{}
			body.creations #pageWrap #page{
				width: 100%;
			}
			body.creations .centreMe{}

		body.creations .creationsWrap{
			position: relative;
			overflow: hidden;
			height: 500px;
			padding: 0 0 0 120px;
			background: url("img/bg_creations_creationsWrap.gif") 50% 228px repeat-x;
		}
			body.creations .creationsWrap a.arrow{
				position: absolute;
				top: 207px;
				width: 44px;
				height: 43px;
				background-image: url("img/sprite_creations-arrows.png");
			}
			body.creations .creationsWrap a.leftArrow{
				background-position: 0px -43px;
				left: 169px;	
			}
			body.creations .creationsWrap a.leftArrow:hover{
				background-position: 0px 0px;
			}
			body.creations .creationsWrap a.leftArrow.inactive,
			body.creations .creationsWrap a.leftArrow.inactive:hover{
				background-position: 0px -86px;
				left: 169px;
			}
			
			body.creations .creationsWrap a.rightArrow{
				background-position: -44px -43px;	
				left: 762px;
			}
			body.creations .creationsWrap a.rightArrow:hover{
				background-position: -44px 0px;	
			}
			body.creations .creationsWrap a.rightArrow.inactive,
			body.creations .creationsWrap a.rightArrow.inactive:hover{
				background-position: -44px -86px;
				left: 762px;
			}
			
			body.creations .creationsWrap a.inactive,
			body.creations .creationsWrap a.inactive:hover{
				cursor: default;
			}
		
			body.creations .creationsWrap ul{
				display: block;
				height: 455px;
				width: 10000px;
				position: relative;	
				left: 0px;
			}
				body.creations .creationsWrap ul li{
					display: block;
					width: 665px;
					float: left;
				}
					body.creations .creationsWrap ul li .text{
						margin: 0 0 0 28px;
						width: 365px;
						float: left;
					}
						body.creations .creationsWrap ul li .text h3{
							font-weight: normal;
							line-height: 1;	
						}
						body.creations .creationsWrap ul li .text h3.agency{
							font-size: 19px;
							color: #545454;	
						}
						body.creations .creationsWrap ul li .text h3.client{
							font-size: 25px;
							color: #282828;	
						}
							body.creations .creationsWrap ul li .text p{}
								body.creations .creationsWrap ul li .text p span{
									font-weight: bold;
								}
					body.creations .creationsWrap ul li .bubble{
						display: block;
						height: 71px;
						margin: 0 0 5px 375px;
					}
					
						body.creations .creationsWrap ul li .bubble .leftSide,
						body.creations .creationsWrap ul li .bubble .rightSide{
							display: block;
							height: 100%;
							float: left;
							background-image: url("img/sprite_clientBubble.png");
							background-repeat: no-repeat;
						}
					
						body.creations .creationsWrap ul li .bubble .leftSide{
							padding: 0 1px 0 16px;
							background-position: 0px 0px;
						}
						body.creations .creationsWrap ul li .bubble .rightSide{
							width: 15px;
							background-position: 100% 0px;
						}
					
						body.creations .creationsWrap ul li .bubble p{
							font: 13px/58px normal Georgia, "Times New Roman", Times, serif;
							color: #686868;
						}
							body.creations .creationsWrap ul li .bubble p span{
								font: 13px bold Arial, Helvetica, sans-serif;
								color: #fff;
								letter-spacing: normal;
								font-weight: bold;
							}
					
					body.creations .creationsWrap ul li .images{
						display: block;
						width: 100%;
						height: 284px;
						position: relative;
					}

						body.creations .creationsWrap ul li .images .imgContainer{
							display: block;
							background: url("img/throbber_creations-image.gif") 50% 50% no-repeat;
							position: relative;
						}
					
						body.creations .creationsWrap ul li .images .small{
							position: absolute;
							top: 0px;
							left: 211px;
							display: block;
							width: 192px;
							height: 147px;
							background: url("img/bg_images-small.png") 0px 0px no-repeat;		
						}
							body.creations .creationsWrap ul li .images .small .imgContainer{
								width: 192px;
								height: 147px;
							}
								body.creations .creationsWrap ul li .images .small .imgContainer img{
									width: 192px;
									height: 147px;	
								}
							
						body.creations .creationsWrap ul li .images .medium{
							position: absolute;
							top: 86px;
							left: 260px;
							display: block;
							width: 301px;
							height: 183px;
							background: url("img/bg_images-medium.png") 0px 0px no-repeat;
						}	
							body.creations .creationsWrap ul li .images .medium .imgContainer{
								width: 260px;
								height: 170px;
								margin: 0 0 0 19px;
							}
								body.creations .creationsWrap ul li .images .medium .imgContainer .overlay{
									position: absolute;
									top: 0px;
									left: 39px;
									display: block;
									width: 40px;
									height: 100%;
									background: url("img/bg_images-medium-overlay.png") 0px 0px repeat-y;
								}
							
								body.creations .creationsWrap ul li .images .medium .imgContainer img{
									width: 260px;
									height: 170px;	
								}
						
						body.creations .creationsWrap ul li .images .main{
							position: absolute;
							top: 44px;
							left: 0px;
							display: block;
							width: 348px;
							height: 240px;
							background: url("img/bg_images-main.png") 0px 0px no-repeat;	
						}
							body.creations .creationsWrap ul li .images .main .imgContainer{
								width: 291px;
								height: 223px;
								margin: 0 0 0 28px;
							}					
								body.creations .creationsWrap ul li .images .main .imgContainer img{
									width: 291px;
									height: 223px;	
								}
					
					body.creations .creationsWrap ul li a.galleryBtn{
						font: 23px/1 Georgia, "Times New Roman", Times, serif;
						display: block;
						text-align: right;
						color: #6b6b6b;
						width: 101px;
						height: 55px;
						background: url("img/sprite_galleryBtn.png") 0px 0px no-repeat;
						float: right;
						margin-top: -20px;
						letter-spacing: -1px;
						padding: 35px 0 0 15px;
					}
						body.creations .creationsWrap ul li a.galleryBtn span{
							font-size: 44px;
							position: relative;
							top: -15px;
							left: -15px;
						}
					body.creations .creationsWrap ul li .galleryImages{
						display: none;	
					}
					
					body.creations .creationsWrap ul li a.galleryBtn:hover{
						background-position: 0px -100px;
						color: #6b6b6b;
						text-decoration: none;
					}
	
				body.creations .creationsWrap ul li.active{
					padding: 0 0 0 84px;
				}
					
				body.creations .creationsWrap ul li.inactive{
					width: 268px;
					padding: 160px 0 0 0;
					margin: 0 5px 0 0;
					cursor: pointer;
				}
				
					body.creations .creationsWrap ul li.inactive .images{
						height: 145px;
					}

						body.creations .creationsWrap ul li.inactive .images .small{
							left: 101px;
							width: 91px;
							height: 56px;
							background: url("img/bg_images-small_small.png") 0px 0px no-repeat;		
						}
							body.creations .creationsWrap ul li.inactive .images .small .imgContainer{
								width: 91px;
								height: 56px;
							}
								body.creations .creationsWrap ul li.inactive .images .small .imgContainer img{
									width: 91px;
									height: 56px;	
								}
							
						body.creations .creationsWrap ul li.inactive .images .medium{
							top: 41px;
							left: 112px;
							width: 145px;
							height: 88px;
							background: url("img/bg_images-medium_small.png") 0px 0px no-repeat;
						}	
							body.creations .creationsWrap ul li.inactive .images .medium .imgContainer{
								width: 124px;
								height: 81px;
								margin: 0 0 0 10px;
							}
								body.creations .creationsWrap ul li.inactive .images .medium .imgContainer .overlay{
									left: 28px;
									width: 19px;
									height: 100%;
									background: url("img/bg_images-medium-overlay_small.png") 0px 0px repeat-y;
								}
							
								body.creations .creationsWrap ul li.inactive .images .medium .imgContainer img{
									width: 124px;
									height: 81px;	
								}
						
						body.creations .creationsWrap ul li.inactive .images .main{
							top: 21px;
							width: 166px;
							height: 115px;
							background: url("img/bg_images-main_small.png") 0px 0px no-repeat;	
						}
							body.creations .creationsWrap ul li.inactive .images .main .imgContainer{
								width: 139px;
								height: 107px;
								margin: 0 0 0 13px;
							}					
								body.creations .creationsWrap ul li.inactive .images .main .imgContainer img{
									width: 139px;
									height: 107px;	
								}
				
				
					body.creations .creationsWrap ul li.inactive .bubble,
					body.creations .creationsWrap ul li.inactive .text,
					body.creations .creationsWrap ul li.inactive a.galleryBtn{
						display: none;	
					}
				
					
	/* error */
	body.error{}
		body.error .centreMe{
			color: #545454;
			font-family: Georgia, "Times New Roman", Times, serif;
		}
			body.error .centreMe h3{
				text-align: center;	
				font-size: 32px;
				color: #737373;
				margin: 0 0 30px 0;
			}
				body.error .centreMe h3 span{
					color: #282828;	
				}
			body.error .centreMe p{
				text-align: left;
				margin: 0 0 10px 0;
				font-size: 13px;
				color: #545454;
			}
				body.error .centreMe p a{
					color: #e70000;
				}
				body.error .centreMe p a:hover{
					text-decoration: underline;
				}			
	
	/*misc internal pages*/
	.internal .centreMe{
		margin-top: 220px;
		color: #737373;
	}
	
		.internal .centreMe .redBubble{
			color: #fff;
			font-size: 12px;
			background: red;
			display: block;
			width: 212px;
			height: 70px;
			background: url("img/bg_red-bubble.png") 0px 0px no-repeat;
			text-align: center;
		}
			.internal .centreMe .redBubble p{
				line-height: 57px;
				letter-spacing: -1px;
				font-size: 13px;
			}
			.internal .centreMe .redBubble span{
				color: #fff;
				font-family: Arial, Helvetica, sans-serif;
				font-weight: bold !important;
				float: none !important;
			}