/*/////////////////////////////////////////////////////////////////////
	Menu
///////////////////////////////////////////////////////////////////////

	Standard bits
	******************************
	* Clearfix
	* Reset
	
	Page Framework
	******************************
	* Site
	* Header
	* Nav
	* Footer
	
	Global Elements
	******************************
	* Article
	* Comments
	* Forms
	
///////////////////////////////////////////////////////////////////////
	ClearFix
/////////////////////////////////////////////////////////////////////*/

	.clearfix:after {
	   content:".";
	   display:block;
	   height:0;
	   clear:both;
	   visibility:hidden;
	}
	.clearfix {
		display:inline-block;
	}
	.clearfix {
		display:block;
	}	
		
	.clear {
		height:0em;
		font:1px/1px sans-serif;
		text-decoration:none;
		margin:0;
		padding:0;
		clear:both;
	}
	
/*/////////////////////////////////////////////////////////////////////
	Reset
/////////////////////////////////////////////////////////////////////*/

	* {
		margin:0;
		padding:0;
	}
	
	body {
		font-size:62.5%;
	}
	
	body, ul, li, p,
	input, select, textarea,
	h1, h2, h3, h4, h5 {
		font-family:Arial, Helvetica, sans-serif;
		text-decoration:none;
	}

	lablel {
		display:block;
	}
	label input, label select, label textarea {
		font-size:1em;
	}
	
	img {
		display:block;
	}
	a img {
		border:none;
	}
	
	table {
		border-collapse:collapse;
	}
	
	button {
		background-color:transparent;
		cursor:pointer;
		border:0; 
		display:block;
	}
	
	dl dt,
	dl dd {
		display:block;
	}
	
	object,
	embed {
		outline:0;
	}
	
	a * {
		cursor:pointer;
	}

/*/////////////////////////////////////////////////////////////////////
	Site
/////////////////////////////////////////////////////////////////////*/
	
	body {
		background:#fff;
	}
	
	#wrapper {
		width:730px;
		margin:0 auto;
		padding:40px 0 0 0;
	}
		#wrapper #content {
			width:560px;
			float:left;
		}
		#wrapper #side {
			float:right;
			width:170px;
			padding:0;
		}
	
/*/////////////////////////////////////////////////////////////////////
	Header
/////////////////////////////////////////////////////////////////////*/

	#header h1 {
		height:110px;
		margin:0 0 14px 0;
	}
		#header h1 a {
			display:block;
			outline:0;
			height:110px;
			width:110px;
			text-indent:-9999px;
			background:url(../images/layout/logo.jpg) no-repeat top center;
			float:right;
		}
		
	#side h3 {
		display:block;
		font-size:1.7em;
		line-height:1.2em;
		color:#333333;
		padding:0 10px 4px 0;
		text-align:right;
		clear:both;
	}
	#side ul {
		text-align:right;
		padding:0 10px 25px 0;
	}
		#side ul li {
			list-style:none;
			font-size:1.5em;
			line-height:1.2em;
			margin:0 0 4px 0;
		}
			#side ul li a {
				color:#333333;
				text-decoration:none;
			}
				#side ul li a:hover {
					text-decoration:underline;
				}
	
	#side #socials {
		padding:0 10px 10px 0;
	}
		#side #socials a {
			float:right;
			padding:0 0 0 6px;
		}
			#side #socials a:hover img {
				opacity:0.8;
				filter:alpha(opacity:80);
			}
	

	#nav {
		height:350px;
	}
		#nav ul {
		}
			#nav ul li {
				list-style:none;
				height:67px;
				margin:0 0 4px 0;
			}
				#nav ul li a {
					display:block;
					text-indent:-9999px;
					height:67px;
					outline:0;
					background-position:0 0;
					background-repeat:no-repeat;
					background-image:url(../images/layout/nav.gif);
				}
				
				#nav ul li#nAbout a {
					background-position:0 0;
				}
					#nav ul li#nAbout a:hover,
					#nav ul li#nAbout.active a {
					background-position:0 -350px;
					}
				#nav ul li#nWork a {
						background-position:0 -68px;
				}
					#nav ul li#nWork a:hover,
					#nav ul li#nWork.active a {
						background-position:0 -420px;
					}
				#nav ul li#nClients a {
					background-position:0 -140px;
				}
					#nav ul li#nClients a:hover,
					#nav ul li#nClients.active a {
						background-position:0 -490px;
					}
				#nav ul li#nContact a {
					background-position:0 -210px;
				}
					#nav ul li#nContact a:hover,
					#nav ul li#nContact.active a {
						background-position:0 -561px;
					}
				#nav ul li#nBlog a {
					background-position:0 -282px;
				}
					#nav ul li#nBlog a:hover,
					#nav ul li#nBlog.active a {
						background-position:0 -632px;
					}

/*/////////////////////////////////////////////////////////////////////
	Section
/////////////////////////////////////////////////////////////////////*/
					
	#section {	
		margin:24px 0 0 0;
		background:url(../images/layout/dot.gif) repeat-x top left;
	}
	
/*/////////////////////////////////////////////////////////////////////
	Footer
/////////////////////////////////////////////////////////////////////*/

	#footer {
		width:660px;
		float:left;
		clear:both;
		font-size:1.1em;
		line-height:1.4em;
		padding:16px 0 40px 0;
		color:#333333;
	}
		#footer a {
			color:#333333;
			text-decoration:underline;
		}
			#footer a:hover {
				color:#000000;
			}
	
/*/////////////////////////////////////////////////////////////////////
	Article
/////////////////////////////////////////////////////////////////////*/

	/* Colours */
	.welike h2,
	.welike h2 a,
	.welike h3 a,
	.category-welike .pag a,
	.welike p a,
	.welike .viewmore a,
	.welike p.info a:hover {
		color:#323076;
	}
	.about-us h2,
	.about-us h2 a,
	.about-us h3 a,
	.about-us .pag a,
	.about-us p a,
	.about-us .viewmore a,
	.about-us p.info a:hover {
		color:#DF562A;
	}
	
	.about h2,
	.about h2 a,
	.about h3 a,
	.about .pag a,
	.about p a,
	.about .viewmore a,
	.about p.info a:hover {
		color:#ae0079;
	}
	.work h2,
	.work h2 a,
	.work h3 a,
	.category-work .pag a,
	.home .pag a,
	.work p a,
	.work .viewmore a,
	.work p.info a:hover {
		color:#D9232D;
	}
	.contact h2,
	.contact h2 a,
	.contact h3 a,
	.contact .pag a,
	.contact p a,
	.contact .viewmore a,
	.contact p.info a:hover {
		color:#54177e;
	}
	.clients h2,
	.clients h2 a,
	.clients h3 a,
	.clients .pag a,
	.clients p a,
	.clients .viewmore a,
	.clients p.info a:hover {
		color:#182372;
	}

	.article {
		padding:20px 0 0 0;
		background-position:100% 25px;
		background-repeat:no-repeat;
	}
		.article h2 {
			font-size:2.7em;
			font-size:bold;
			line-height:1.1em;
			margin:0 0 10px 0;
			font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
			letter-spacing:-0.02em;
		}
			.article h2 a {
				text-decoration:none;
			}
		.article object,
		.article img {
			margin:0 0 1.5em 0;
		}
		.article ul {
			margin:0 0 1.4em 0;
		}
			.article ul li {
				font-size:1.4em;
				font-weight:100;
				line-height:1.4em;
				color:#333333;
				margin-left:16px;
			}
		.article p {
			font-size:1.4em;
			font-weight:100;
			line-height:1.4em;
			color:#333333;
			margin:0 0 0.8em 0;
		}
			.article p.info {
				font-size:1.3em;
				margin:0;
				background:url(../images/layout/dot.gif) repeat-x bottom left;
				padding:0 0 10px 0;
			}
				.article p.info a {
					text-decoration:none;
					color:#333333;
				}
		.article .viewmore {
			font-size:1.6em;
			font-weight:100;
			line-height:1.4em;
			color:#333333;
			margin:0 0 0.8em 0;
			height:20px;
		}
			.article .viewmore a {
				font-weight:bold;
				text-decoration:none;
				margin:0 5px 0 0;
			}
			.article .viewmore a.left,
			.article .viewmore a.right {
				display:inline-block;
				text-indent:-9999px;
				float:left;
				outline:0;
				height:20px;
				width:20px;
				background-image:url(../images/buttons/viewmore.gif);
				background-position:0 0;
				background-repeat:no-repeat;
			}
				.welike .viewmore a.right {
					background-position:0 0;
				}
				.welike .viewmore a.left {
					background-position:0 -20px;
				}
				.about .viewmore a.right {
					background-position:-20px 0;
				}
				.about .viewmore a.left {
					background-position:-20px -20px;
				}
				.work .viewmore a.right {
					background-position:-40px -20px;
				}
				.work .viewmore a.left {
					background-position:-40px 0;
				}
				.contact .viewmore a.right {
					background-position:-60px 0;
				}
				.contact .viewmore a.left {
					background-position:-60px -20px;
				}
	
	/* New */	
	.article.new h2,
	.article.new p {
		margin-right:120px;
	}
	.article.new p.info {
		margin-right:0;
	}
	/*
	div.new.blog {
		background-image:url(../images/layout/new/blog.gif);
	}
	div.new.about {
		background-image:url(../images/layout/new/about.gif);
	}
	div.new.work {
		background-image:url(../images/layout/new/work.gif);
	}
	div.new.contact {
		background-image:url(../images/layout/new/contact.gif);
	}
	*/
	.welike .new {
		background-image:url(../images/layout/new/blog.gif);
	}
	.about .new  {
		background-image:url(../images/layout/new/about.gif);
	}
	.work .new  {
		background-image:url(../images/layout/new/work.gif);
	}
	.contact .new {
		background-image:url(../images/layout/new/contact.gif);
	}
	
	.new {
		width:74px;
		height:74px;
		float:right;
		position:relative;
		margin:0 0 20px 20px;
	}
		
	/* Google Map */
	.article #map {
		height:390px;
		width:560px;
		margin:0 0 1.8em 0;
	}
	.googlebox {
		font-size:1.2em;
		color:#333333;
		line-height:1.4em;
	}
	
/*/////////////////////////////////////////////////////////////////////
	Comments
/////////////////////////////////////////////////////////////////////*/

	.comments {
		background:url(../images/layout/dot.gif) repeat-x bottom left;
		padding:20px 0;
	}
		.comment {
			margin:0 0 20px 0;
			}
		.comments h2 {
			font-size:2em;
			font-size:bold;
			line-height:1.1em;
			margin:0 0 15px 0;
			font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
			letter-spacing:-0.02em;
		}
		.comments h3 {
			font-size:1.4em;
			font-size:bold;
			line-height:1.1em;
			margin:0 0 8px 0;
			font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
			letter-spacing:-0.02em;
		}
		.comments p {
			font-size:1.3em;
			font-weight:100;
			line-height:1.4em;
			color:#333333;
			margin:0 0 0.8em 0;
		}
			.comments p.info {
				font-size:1.4em;
				margin:0;
				background:url(../images/layout/dot.gif) repeat-x bottom left;
				padding:0 0 10px 0;
			}
				.comments p.info a {
					text-decoration:none;
					color:#333333;
				}
		
	.comments .add {	
		padding:24px 0 0 0;
		background:url(../images/layout/dot.gif) repeat-x top left;
	}
	
/*/////////////////////////////////////////////////////////////////////
	Forms
/////////////////////////////////////////////////////////////////////*/

	#section form {
		margin:0 0 1.4em 0;
	}
		#section form label {
			float:left;
			width:270px;
			font-size:1.3em;
			font-weight:100;
			line-height:1.4em;
			color:#333333;
			margin:0 20px 20px 0;
		}
			#section form label.end {
				margin-right:0;
			}
			#section form label.textarea {
				float:none;
				width:100%;
				clear:both;
			}
			#section form label input,
			#section form label textarea {
				width:80%;
				border:1px solid #cccccc;
				font-size:1em;
				font-weight:100;
				line-height:1.4em;
				color:#333333;
				padding:4px 8px;
				margin:5px 0 0 0;
				width:250px
			}
			#section form label textarea {
				height:120px;
				width:540px;
			}
			#section input#submit {
				clear:both;
				margin:20px 0 0 0;
				float:right;
			}
	
	.pag .alignleft {
		float:left;	
		margin:10px 0 0.4em 0;
	}
	.pag a {
		font-weight:bold;
		text-decoration:underline;
		font-size:1.4em;
		line-height:1.4em;
	}
	.pag .alignright {
		float:right;
		margin:10px 0 0.4em 0;
	}