/*
title:		Our Agency styles
created:	16.04.2010
modified:	22.04.2010
*/

/* ================[ reset ]================ */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, 
fieldset, input, textarea, p, blockquote, th, td { padding: 0; margin: 0; }

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 100%;
}

img { border: none; }

a { color: #FFF; }
a:hover { }

/* ================[ general styles ]================ */

.clearme { clear: both; height: 0; font-size: 0; }

body {
	background: #FFF;
	color: #FFF;
	font-size: 62.5%; /* 1em is 10px */
	font-family: Arial, Verdana, Helvetica, sans-serif;
}

/* ================[ layout ]================ */

html, body { height: 100%; }

div#shim {
	visibility: hidden;
	width: 100%;
	height: 50%;
	margin-top: -275px;
	float: left;
}

div#ourContainer {
	width: 960px;
	height: 550px;
	clear: both;
	position: relative;
	top: -275px;
	position: static;
	margin: 0 auto;
}

/* ================[ navigation ]================ */

ul#navigation {
	list-style: none;
	font-size: 1.8em;
	text-transform: uppercase;
	position: absolute; top: 40px; left: 40px;
	color: #000;
}

ul#navigation li {
	float: left;
	clear: both;
	margin-bottom: 1px;
}
/*
li#youLink { position: absolute; top: 29px; left: 95px; }
ul#navigation li#youLink a { padding: 2px 10px 3px 5px; }
*/

ul#navigation a {
	text-decoration: none;
	color: #000;
	background: #FFF;
	font-weight: bold;
	padding: 2px 10px 3px 5px;
	float: left;
	letter-spacing: -0.05em;
}

ul#navigation a:hover, ul#navigation a.selected { color: #6dc067; }

/* ================[ content ]================ */

div#content {
	width: 960px;
	height: 550px;
	position: relative;
}
div.homepage-content { background: url(../images/background-welcome.jpg) top left no-repeat; }
div.about-us-content { background: url(../about-us/background-table.jpg) top left no-repeat; }
div.about-you-content { background: url(../about-us/background-sunset.jpg) top left no-repeat; }
div.our-work-content { background: url(../our-work/images/background-work.jpg) top left no-repeat; }
div.contact-us-content { background: url(../contact-us/background-contact.jpg) top left no-repeat; }

img#logo { position: absolute; bottom: 40px; right: 40px; }

h1 {
	font-size: 6em;
	line-height: .4em;
	position: absolute; top: 200px; left: 40px;
	font-weight: bold;
	width: 880px;
}

div#information {
	position: absolute; bottom: 40px; left: 40px;
	font-size: 1.2em;
	line-height: 1.4em;
	width: 560px;
}

/* ================[ our work ]================ */

div.projectOverview {
	display: none;
	background: #000;
}

div.projectDetail {
	width: 844px;
	height: 434px;
	padding: 18px;
	background: #FFF;
	color: #000;
	position: absolute; top: 40px; left: 40px; z-index: 2;
	
	display: none;
}

div.projectDescription {
	padding-top: 5px;
}

div.projectDescription p {
	line-height: 1.4em;
	font-size: 1em;
}

div.projectDescription h3 {
	font-size: 1.8em;
	margin-bottom: 5px;
	text-transform: uppercase;
}

div.projectDescription-text {
	float: left;
	width: 510px;
}

div.projectThumbs {
	width: 312px;
	float: right;
	margin-top: 10px;
}

div.projectThumbs ul li {
	list-style: none;
	float: left;
	padding-left: 8px;
}

div.projectThumbs a { border-bottom: 4px solid #FFF; float: left; *padding-bottom: 3px; }
div.projectThumbs a.selectedThumb { border-bottom: 4px solid #6dc067; }

div.projectDetail a.closeProject {
	color: #000;
	position: absolute; top: 2px; right: 5px;
	padding-right: 12px;
	background: url(../our-work/images/close.gif) right 2px no-repeat;
	font-size: 1.1em;
	text-decoration: none;
}

a.showProject {
	position: absolute;
	display: block;
	text-indent: -5555px;
	overflow: hidden;
}
	/* ================[ project one ]================ */
	div#project-one a.showProject {
		left: 64px; top: 343px;
		width: 125px; height: 169px;
		background: url(../our-work/images/project-one/thumb.jpg) top left no-repeat;
	}
	div#project-one a.showProject:hover { background-position: 0 -169px; }
	
	div#project-one div.projectOverview {
		background: #000;
		width: 150px; padding: 10px;
		position: absolute; top: 343px; left: 200px;
	}
	
	/* ================[ project two ]================ */
	div#project-two a.showProject {
		left: 510px; top: 368px;
		width: 138px; height: 101px;
		background: url(../our-work/images/project-two/thumb.jpg) top left no-repeat;
	}
	div#project-two a.showProject:hover { background-position: 0 -101px; }
	
	div#project-two div.projectOverview {
	}
	
	/* ================[ project three ]================ */
	div#project-three a.showProject {
		left: 369px; top: 198px;
		width: 67px; height: 46px;
		background: url(../our-work/images/project-three/thumb.jpg) top left no-repeat;
	}
	div#project-three a.showProject:hover { background-position: 0 -46px; }
	
	div#project-three div.projectOverview {
	}
	
	/* ================[ project four ]================ */
	div#project-four a.showProject {
		left: 510px; top: 107px;
		width: 61px; height: 46px;
		background: url(../our-work/images/project-four/thumb.jpg) top left no-repeat;
	}
	div#project-four a.showProject:hover { background-position: 0 -46px; }
	
	div#project-four div.projectOverview {
	}
	
	/* ================[ project five ]================ */
	div#project-five a.showProject {
		left: 353px; top: 32px;
		width: 61px; height: 46px;
		background: url(../our-work/images/project-five/thumb.jpg) top left no-repeat;
	}
	div#project-five a.showProject:hover { background-position: 0 -46px; }
	
	div#project-five div.projectOverview {
	}