@charset "utf-8";

/**********************************************************************
# Copyright Left, Right & Centre Pty Ltd
# Author: Mattias Lindgren
# File: style.css
# Date: 16/06/2010
************************************************************************/

/***********************************************************************						
 Reset global styles
************************************************************************/

@import url(reset.css);

/***********************************************************************						
 Set global styles
************************************************************************/
html, body{
	height: 100%;
}

body {
	background-color: #000000;	
	margin: 0;
	font-family: georgia, times new roman, serif;
	font-size: 22px;
	line-height: 30px;	
	font-weight: normal;
	color: #FFFFFF;		
}

input {
	font-family: georgia, times new roman, serif;	
}

a {	
	color: #FFFFFF;
	text-decoration: underline;
}

a:hover {
	color: #00B0D8;
	text-decoration: underline;
}

.clear-all {
	clear: both;
}

.you {
	display: none;
}


/***********************************************************************						
 Set document structure
************************************************************************/

div#flash {
	background: black;
	overflow: hidden;
	width: 100%;
	position: fixed !important;
	z-index: 1;
}

div#page {		
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 2;
}

div#wrapper {
	margin: 0 auto;
	width: 980px;
}

div#header {
	padding: 20px 0 15px 0;
	border-bottom: 1px solid #666666;	
}
	div#header div#logo
	{
		float: left;
		width: 180px;
		height: 95px;
	}
	
	div#header div#logo a {		
		background:url(../_img/logos/LeftRightAndCentre.png) 0 0 no-repeat;
		width: 180px;
		height: 95px;
		display: block;
		text-indent: -999em;
		font-size: 14px;
	}
	
	/* Set the logo backgrounds */
	/*body#work div#logo a { background:url(../_img/logos/passionCreativityAndIdeas.png) 0 0 no-repeat; }
	body#services div#logo a { background:url(../_img/logos/designTechnologyAndStrategy.png) 0 0 no-repeat; }
	body#people div#logo a { background:url(../_img/logos//mattMattiasAndMarc.png) 0 0 no-repeat; }
	body#contact div#logo a { background:url(../_img/logos/halloGdayAndSutMae.png) 0 0 no-repeat; }*/

div#menu {
	font-size: 16px;
	text-transform: uppercase;
	float: right;
	width: 440px;
}

	div#menu a
	{		
		text-decoration: none;
	}
	
	div#menu ul {
		padding: 38px 0;
		list-style: none;
	}
	
		div#menu li {
			float: left;
			margin: 0 10px 0 10px;
		}
		
		/* Highlight the current website section */
		body#home div#menu .home,
		body#work div#menu .work,
		body#services div#menu .services,
		body#people div#menu .people,
		body#contact div#menu .contact
		{
			color: #00B0D8;
		}
			
div#content, form {
	padding: 10px 0 10px 0;
	text-align: center;
}

	body#home div#content {
		text-align: center;
	}
	
		div#slideshow {			
			overflow: hidden;
			height: 500px;
			margin: 10px 0 0 0;
			padding: 0;
		}
		
		div#slideshow img {			
			margin: 0;
			height: 500px;
			width: 980px;				
		}
		
		div#weather	{
			position: absolute;
			top: 271px;
			z-index: 1;
			height: 500px;
			background-color: #F05A28;
			text-align: center;	
			display: none;
		}
		
		div#weather	.currently{
			padding: 80px 0 0 0;
			font-size: 16px;
		}	
		
		div#weather	.time{
			padding: 0 0 10px 0;
		}
	
			div#weather	.clock{
				
			}
		
		div#weather	.icon{
			padding: 20px 0 20px 0;
		}
		
		div#weather	.temperature{
			font-size: 40px;
			padding: 0 0 20px 0;
		}
		
		div#weather	.wind {
			
		}
		
		div#weather	.temp{

		}	
		
		div#weather	.colourbar{
			padding: 70px 0;
		}		
			
		div#nav	{
			position: relative;
			top: -280px;
			z-index: 200;
			width: 980px;			
		}
		
			div#nav a#prev	{
				float:left;
				margin-bottom: -60px; /* Use negative margin larger than image in anchor to stop this area taking up space */
			}
			
			div#nav a#next	{
				float:right;
				margin-bottom: -60px; /* Use negative margin larger than image in anchor to stop this area taking up space */
			}
	
	body#work div#workgrid
	{
		clear: both;
		margin: 10px 0 10px 0;	
	}
	
	body#work div#workgrid ul {
		list-style: none;			
	}	
	
		body#work div#workgrid ul li {
			float: left;
			width: 326px;
			height: 167px;
			margin: 0px 0px 3px 0px;
			padding: 0px;	
		}
		
		body#work div#workgrid ul li a {
			text-decoration: none;	
			text-align: center;
		}
		
		body#work .clientname {			
			position:absolute;			
			width: 325px;
			height: 95px;
			display: block;
			text-align: center;
			color: #FFFFFF;	
			background: #000000;
			padding: 70px 0 0 0;
		}
		
		body#work div.secondary p
		{
			text-align:center; 
			width: 980px; 
			padding-bottom: 20px;
		}
		
		div#brief {
			border-bottom: 1px solid #666666;
			padding: 0 10px 10px 10px;
			font-size: 16px;
			text-align: center;
		}
		
	
	div#what-we-do {
		background: url(../_img/layout/whatWeDoDiagram.png) top left no-repeat;
		width: 752px;
		height: 437px;
		margin: 20px auto;
	}	
	
		div#what-we-do .column {
			text-align: center;
			float: left;
			width: 270px;
			margin: 85px 0px 0 70px;
		}
		
		div#what-we-do .column ul {
			list-style: none;
			margin: 20px 0 0 0;
		}
		
			div#what-we-do .column li {
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: 11px;
				line-height: 17px;
			}

			#pager {
				display: block;
				background: #000;
			}

			#pager img {
				margin-left: 6px;
				display: block;
				float: left;

			}

			#pager img:first-child {
				margin-left: 0;
			}

	body#people div#content	{}
	
	body#people div#profiles {
		width: 980px;
	}

		body#people div#profiles .profile img.photo {
			display: none;
		}

		.profile {
			padding: 10px 30px;
			width: 920px;
		}

		.profile .details {
			float: left;
			width: 190px;
		}

		.profile .details ul {
			margin: 15px 0;
			width: 95%;
		}

		.profile .details ul li {
			list-style: none;
			float: left;
			margin: 3px;
			display: block;
		}

		.profile .details ul li img {
			display:block;
		}

		.profile .details ul li a.vcard-download {
			font-size: 14px;
			color: #00B0D8;
			padding: 2px 0 0 40px;
			margin-top: 20px;
			background: url(../_img/icons/vcard.png) no-repeat;
			display: block;
			height:35px;
			text-decoration: none;
			font-style: italic;
		}

		#hcard-profile,
		.profile .contact,
		.profile .org {
			display: none;
		}
		.profile .note {
			float: left;
			width: 700px;
			margin-left: 20px;
		}
			body#people div#profiles .profile h2	{
				font-size: 24px;
				line-height: normal;
				font-weight: normal;
				margin: 20px 0 0px 0;
			}
			
			body#people div#profiles .profile h3	{
				font-size: 19px;
				font-weight: normal;
				color: #00B0D8;
				font-style: italic;
				line-height: normal;
			}
			
			body#people div#profiles .profile p {
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: 12px;
				line-height: 1.6em;
				margin: 20px 20px 20px 20px;
			}

			body#people div#profiles .profile .note p:first-child {
				font-family: Georgia;
				font-size: 19px;
				line-height: 1.4em;
			}
		
		body#people div#profiles .image {
			float: left;
			width: 326px;			
			background-color: #000000;
		}	
		
body#contact div#contact {}	
		
		body#contact div#contact ul	{
			list-style: none;			
		}
		
			body#contact div#contact li	{
				float: left;
				text-align: center;
				width: 323px;	
				height: 250px;
				margin-right: 3px;
				padding-top: 20px;
			}
		
				body#contact div#contact h2, form#contactForm h2	{	
					font-weight: normal;
					color: #00B0D8;
					font-size: 22px;
				}
				
				body#contact div#contact img	{
					margin: 20px 0 10px 0;
				}	
				
				body#contact div#contact p	{	
					font-family: Verdana, Arial, Helvetica, sans-serif;
					font-size: 11px;
					line-height: 17px;
					margin: 0 0 10px 0;				
				}	
				
div#javascriptEnabled {	
	text-align:center;
	background-color: #00B0D8;
	padding: 10px;
}

div#javascriptEnabled a {	
	clear: both;
	color: #FFFFFF;
}
				
form#contactForm {
	clear: both;
	background: url(../_img/layout/black-60.png) repeat top left;
	padding: 20px;	
	font-size: 22px;
	margin: 3px 0 -6px 0;
}
				
	form#contactForm input	{
		color: #FFFFFF;		
		border: none;
		font-size: 18px;
	}		
		form#contactForm input#contact-name,
		form#contactForm input#contact-subject,
		form#contactForm input#contact-email,
		form#contactForm input#contact-phone,
		form#contactForm input#contact-heard	{
			border-bottom: 1px solid #FFFFFF;	
			background: url(../_img/layout/blank.gif);			
			padding: 0px 5px 5px 5px;	
			color: #00B0D8;
			font-style: italic;	
		}
		
		form#contactForm input#contact-name { width: 320px;	}
		form#contactForm input#contact-subject { width: 560px;	}
		form#contactForm input#contact-email { width: 320px;	}
		form#contactForm input#contact-phone { width: 140px;	}
		form#contactForm input#contact-heard { width: 180px;	}
		
		form#contactForm input.error { border: 1px dotted red; }
		form#contactForm label.error {
			color: red;
			font-style: italic
		}		
		
		form#contactForm input#contact-submit {
			background-color: #00B0D8;
			margin: 10px 0px 20px 0px;
			-moz-border-radius: 3px; -webkit-border-radius: 3px;			
		}		
				

div#footer {
	border-top: 1px solid #666666;
	text-align: center;
	color: #808080;
	font-size: 16px;
	padding: 8px 0 20px 0;
}

/***********************************************************************						
 Flash Replaced Content
************************************************************************/
	.flash-replaced .alt {
		display: block;
		height: 0;
		position: absolute;
		overflow: hidden;
		width: 0;
	}

/* Float Clearing
-------------------------------------------- */

/* float clearing for IE6 */
* html .clearfix,
* html #pager,
* html .profile {
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix,
*+html #pager,
*+html .profile {
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after,
#pager:after,
.profile:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}