/* ------------------------------------------------------------------------
	Stylesheets import
------------------------------------------------------------------------- */

	@import url('menu.css');
	@import url('titles.css');


/* ------------------------------------------------------------------------
	Global Redefinition
------------------------------------------------------------------------- */

	html, body, p, article, section, header, footer, menu, aside, video, ul, img {
		display: block;
		margin: 0;
		padding: 0;
		border: 0;
	}

	body {
		font: 62.5%/1.5 Verdana, Arial, Sans-Serif;
		overflow-y: scroll;
	}
	
	address {
		font-style: normal;
	}
	
	h2 {
		line-height: 1.2;
	}
	
	a {
		color: #84764a;

		text-decoration: none;
	}
	a:hover { text-decoration: underline; }
	
	a:focus { outline: none; }
	
	.noMargin { margin: 0 !important; }
	.noMarginRight { margin-right: 0 !important; }
	
	.cboth { clear: both; }
	

/* ------------------------------------------------------------------------
	Shell
------------------------------------------------------------------------- */

	#page {
		margin: 0 auto;
		padding: 0 20px;
		position: relative;
		width: 1005px;
		z-index: 100;
	}

	.background {
		left: 0;
		overflow: hidden;
		position: fixed;
		top: 0;
		z-index: 0;
	}
	
		.background img {
			left: 0;
			position: absolute;
			top: 0;
		}
	
	header {
		background: #fff;
		display: inline-block;
		height: 42px;
		width: 100%;
	}
	
	#main-footer {
		background: rgba(0,0,0,0.9);
		color: #fff;
		padding: 15px 0 0 0;
		width: 1005px;
	}
	
	.fixed-footer #main-footer {
		bottom: 0;
		position: fixed;
		left: 50%;
		margin-left: -502px;
	}
	
	.content #main-footer {
		clear: both;
		float: left;
	}
	
	* html .fixed-footer #main-footer {position:absolute;}


/* ------------------------------------------------------------------------
	Header
------------------------------------------------------------------------- */

	header h1,
	header h2 {
		float: left;
		font-size: 1em;
		font-weight: normal;
	}
	
	header h1 { margin: 15px 17px 0 20px; }
	
		header h1 a {
			background: url(../images/all/backgrounds/sprite.gif) 0 0 no-repeat;
			display: block;
			height: 13px;
			text-indent: -10000px;
			width: 120px;
		}
	
	header h2 { margin: 17px 0 0 0; }
	
		header h2 a {
			background: url(../images/all/backgrounds/sprite.gif) 0 -20px no-repeat;
			display: block;
			height: 13px;
			text-indent: -10000px;
			width: 165px;
		}
	
	#fr header h2 a { background-position: -180px -20px; width: 183px; }
	
	menu {
		float: right;
		list-style: none;
		margin: 12px 17px 0 0;
	}
	
		menu li {
			border-top: 1px #7f7f7f solid;
			display: block;
			float: left;
			margin: 0 10px 0 0;
		}
		
		menu a {

			display: block;
			height: 25px;
			width: 107px;
		}
		
		menu span {
			display: block;
			height: 25px;
			text-indent: -10000px;
		}
		
		menu li:hover {
			margin-top: 1px;
		}
		
		menu li:hover a { background-position: 89px -38px; }
		
		menu li.selected {
			border-top-color: #000;
			border-top-width: 2px;
		}
		
		menu li.selected:hover { margin-top: 0; }
	
	header nav {
		float: right;
	}
	
		header nav ul {
			list-style: none;
			margin: 12px 20px 0 0;
		}
	
		header nav li {
			float: left;
			margin: 0 0 0 5px;
		}
		
		header nav a {
			background-image: url(../images/all/backgrounds/social.png);
			display: block;
			height: 18px;
			text-indent: -10000px;
			width: 18px;
		}


/* ------------------------------------------------------------------------
	Footer
------------------------------------------------------------------------- */

	#main-footer nav {
		float: left;
		margin: 5px 15px 10px 15px;
	}
	
		#main-footer nav li {
			border-top: 1px #fff solid;
			display: block;
			float: left;
			margin: 0 10px 0 0;
			width: 173px;
		}
		
		#main-footer nav a {
			background: url(../images/all/backgrounds/sprite.gif) 156px -70px no-repeat;
			display: block;
			height: 25px;
			width: 173px;
		}
		
		#main-footer.open nav a {
			background: url(../images/all/backgrounds/sprite.gif) 156px -107px no-repeat;
		}
		
		#main-footer nav span {
			display: block;
			height: 25px;
			text-indent: -10000px;
		}
		
		#main-footer nav li:hover {
			position: relative;
			top: 1px;
		}
		
		#main-footer nav li:hover a { background-position: 156px -71px; }
		#main-footer.open nav li:hover a { background-position: 156px -108px; }
	
	#main-footer address {
		float: left;
		line-height: 1.2;
	}
	
	#main-footer p {
		color: #fff;
		float: right;
		margin: 0;
	}
	
	#main-footer a {
		color: #e2d096;
	}
	
	#main-footer a:hover { text-decoration: underline; }
	
	#main-footer .copy {
		float: left;
		margin: 12px 10px 0 0;
	}
	
	#main-footer .content {
		background: none;
		height: 0;
		overflow: hidden;
		line-height: 1.3;
		margin: 0;
		padding: 0 0 0 18px;
		position: relative;
	}

		#main-footer .content section {
			margin-bottom: 9px;
			border-top: 1px #fff solid;
			float: left;
			margin: 0 10px 0 0;
			padding: 9px 10px 0 10px;
			width: 153px;
		}
		
		#main-footer article {
			float: left;
			margin-bottom: 9px;
		}
		
		#main-footer article p {
			float: none !important;
		}
		
		#main-footer article.thumbnail {
			min-height: 52px;
			padding: 0 0 0 65px;
			position: relative;
		}
		
		#main-footer article.thumbnail .thumbnail {
			left: 0;
			position: absolute;
			top: 0;
		}
		
		#main-footer .rake article {
			margin-bottom: 19px;
		}
		
		#main-footer .social article,
		a.twitter,
		a.facebook,
		a.flickr {
			background: url(../images/all/backgrounds/social.png) 0 2px no-repeat;
			padding: 0 0 0 30px;
		}
		
			#main-footer article img {
				display: block;
				float: left;
				margin: 0 10px 5px 0;
			}
		
		#main-footer .social article span {
			display: inline-block;
			width: 140px;
			word-wrap: break-word; 
		}
			
		#main-footer .content .flickr {
			border: 0;
			padding: 0;
			margin: 0 0 0 13px;
		}
		
			#main-footer .content .flickr ul {
				list-style: none;
				width: 410px;
			}
			
			#main-footer .content .flickr li {
				display: block;
				float: left;
				margin: 0 15px 20px 0;
			}
			
			#main-footer .content .flickr .flickr {
				float: left;
				margin: -15px 0 0 -3px;
			}
			
			#main-footer .content .flickr .flickr a {
				background: url(../images/all/backgrounds/flickr.png) 0 0 no-repeat;
				display: block;
				height: 21px;
				text-indent: -10000px;
				width: 54px;
			}
	
	#main-footer a.language_toggle {
		background: #81660d;
		color: #fff;
		margin: 0 13px;
		padding: 4px 8px 5px 8px;
		position: relative;
		top: -6px;
	}
	
	#main-footer #montreal_ad {
		border-left: 1px #fff solid;
		display: none;
		float: left;
		padding: 0 0 0 13px;
		position: relative;
		top: -2px;
	}


/* ------------------------------------------------------------------------
	Homepage + Contact
------------------------------------------------------------------------- */

	.fixed-footer #page > .content {
		float: right;
		margin: 45px 55px 0 0;
		padding-bottom: 80px;
		width: 520px;
	}
		
		.fixed-footer #page > .content p {
			font-size: 1.1em;
		}
		
		.fixed-footer #page > .content article {
			background: rgba(255,255,255,0.9);
			float: left;
			min-height: 120px;
			padding: 17px 40px 25px 35px;
			width: 445px;
		}
		body#fr.fixed-footer #page > .content article { min-height: 135px; }
		
		.contact #page > .content article {
			margin: 0 0 10px 0;
		}
		
		.fixed-footer #page > .content .nav {
			background: rgba(0,0,0,0.6);
			display: none;
			float: left;
			padding: 13px;
		}
		
		.fixed-footer #page > .content .nav img { display: block; }
		
		.fixed-footer #page > .content li {
			float: left;
			height: 74px;
			list-style: none;
			margin: 0 10px 0 0;
			width: 74px;
		}
		
		.fixed-footer #page > .content li.last { margin-right: 0; }

		.fixed-footer #page > .content .nav li.selected a,
		.fixed-footer #page > .content .nav li a:hover {
			border: 3px #fff solid;
			cursor: pointer;
			display: block;
			height: 68px;
			overflow: hidden;
			width: 68px;
		}

		.fixed-footer #page > .content .nav li.selected img,
		.fixed-footer #page > .content .nav li a:hover img { position: relative; left: -3px; top: -3px; }
		
		.fixed-footer #page > .content > p {
			background: rgba(0,0,0,0.6);
			float: right;
		}
		
			.fixed-footer #page > .content > p a {
				color: #fff;
				display: block;
				font-size: 0.9em;
				padding: 8px 17px;
				text-decoration: none;
			}


/* ------------------------------------------------------------------------
	Contact page
------------------------------------------------------------------------- */

	.contact #page > .content p,
	.contact #page > .content address {
		font-size: 1.1em;
		line-height: 1.6;
		margin: 0 0 10px 0;
	}
	
	.contact #page > .content aside {
		float: left;
		margin: 0 25px 0 0;
		width: 210px;
	}
	

/* ------------------------------------------------------------------------
	Inside content page
------------------------------------------------------------------------- */

	section.content h1 {
		font-size: 3.4em;
		font-weight: normal;
		margin: 0 0 18px 0;
	}
	
	section.content > h1 { margin: 25px 0 0 20px; }

	.content #page > .content {
		background: #fff;
		float: left;
		margin: 10px 0 0 0;
		padding-bottom: 0;
		width: 1005px;
	}
	
	.content #page > .content article {
		padding: 25px 0 0 20px;
		width: auto;
	}
	
	.content #page > .content .leftCol {
		float: left;
		margin: 0 13px 0 0;
		width: 596px;
	}
	
	.content #page > .content .rightCol {
		float: left;
		width: 353px;
	}
	
	.content #page > .content aside img {
		float: left;
		margin: 13px 13px 0 0;
	}
	
	.content #page > .content .rightCol img {
		margin-top: 0;
		margin-bottom: 13px;
	}
	
	.content #page > .content article .atom-body {
		padding: 0 15px !important;
	}
	
	.content #page > .content article.no-image .atom-body { padding: 0 !important; }
	
	#content-footer,
	.content #page > .content .dark {
		background: #f3f1e9 url(../images/all/backgrounds/content_footer_pattern.gif) top left repeat-x;
		clear: both;
		float: left;
		margin: 40px 0 0 0;
		padding-bottom: 35px;
		width: 100%;
	}
	
	#content-footer p.excerpt {
		color: #333333;
		font-size: 0.9em;
	}
	
	#content-footer h2 {
		float: left;
		margin: 0 0 0 20px;
	}
	
	#content-footer ul {
		clear: both;
		float: left;
		list-style: none;
		margin: 10px 0 0 22px;
	}
	
	#content-footer li,
	#content-footer li:hover {
		background: url(../images/all/backgrounds/work_background.gif) top left no-repeat;
		border: 0;
		display: block;
		float: left;
		height: 270px;
		margin: 0 27px 15px 0;
		padding: 4px 4px 4px 5px;
		text-align: left;
		width: 162px;
	}
	
	#content-footer li:hover {
		background-image: url(../images/all/backgrounds/work_background_hover.gif);
	}
	
	#content-footer li:hover img {
		left: 0;
		top: 0;
	}
	
	#content-footer li.last { margin-right: 0; }
	
	#content-footer li p {
		color: #666;
		display: block;
		float: left;
		line-height: 1.2;
		margin: 15px 0 0 0;
		width: 100%;
	}
	
	#content-footer li p.excerpt {
		color: #333333;
		font-size: 1em;
		line-height: 1.5;
	}
	
	#content-footer a {
		color: #81670c;
		font-size: 1.4em;
		text-decoration: none;
	}
	
	#content-footer a:hover { text-decoration: underline; }
	
	div.excerpt {
		background: url(../images/all/backgrounds/dotted-separator.gif) top left repeat-x;
		float: left;
		margin: 0 30px 0 0;
		width: 520px;
	}
	
		div.excerpt .border {
			background: url(../images/all/backgrounds/dotted-separator.gif) bottom left repeat-x;
			font-size: 2.1em;
			line-height: 1.2;
			padding: 24px 0;
		}
		
		#page div.excerpt > p {
			font-size: 1.2em;
			margin: 15px 0 30px 0;
			padding: 0 !important;
		}
		
		#page div.excerpt > p a {
			font-weight: normal;
		}
	
	.project_thumbnail {
		float: left;
		position: relative;
	}
	
		.project_thumbnail h2 {
			left: 20px;
			margin: 0;
			position: absolute;
			top: 0;
		}
		
		.project_thumbnail h3 {
			background: rgba(0,0,0,0.9);
			bottom: 0;
			color: #fff;
			font-size: 1em;
			font-weight: normal;
			left: 20px;
			margin: 0;
			padding: 8px 15px;
			position: absolute;
		}


/* ------------------------------------------------------------------------
	Work Hub page
------------------------------------------------------------------------- */
	
	.work-details #page > .content article .atom-body {
		border: 1px #d1d1d1 solid;
		float: left;
		padding: 15px !important;
	}


/* ------------------------------------------------------------------------
	Work details
------------------------------------------------------------------------- */

	.video {
		position: relative;
	}
	
		.video img {
			float: none !important;
			margin: 0 !important;
		}
	
		.video video {
			background: #000;
			margin: 0 auto;
		}
	
		.video .full-button {
			background: rgba(0,0,0,0.8);
			display: block;
			height: 82px;
			left: 50%;
			margin: -41px 0 0 -41px;
			position: absolute;
			text-indent: -10000px;
			top: 50%;
			width: 82px;
		}
		
		.video .full-button.play {
			background-image: url(../images/all/backgrounds/btn-play.png);
			background-position: center center;
			background-repeat: no-repeat;
		}
		.video .full-button.play:hover { background-image: url(../images/all/backgrounds/btn-play-o.png); }
		
		.video .full-button.loading {
			background-image: url(../images/all/backgrounds/ajax-loader.gif);
			background-position: center center;
			background-repeat: no-repeat;
		}
	
		.video .controls {
			background: rgba(0,0,0,0.8);
			bottom: 0;
			padding: 7px 10px 5px 10px;
			position: absolute;
			width: 573px;
		}
		
			.video .controls .play,
			.video .controls .pause {
				background: url(../images/all/backgrounds/btn-small-play.png) center center no-repeat;
				border: 0;
				float: left;
				height: 14px;
				text-indent:-10000px;
				width: 10px;
			}
			
			.video .controls .play:hover {
				background: url(../images/all/backgrounds/btn-small-play-o.png) center center no-repeat;
			}
			
			.video .controls .pause {
				background: url(../images/all/backgrounds/btn-small-pause.png) center center no-repeat;
			}
			
			.video .controls .pause:hover {
				background: url(../images/all/backgrounds/btn-small-pause-o.png) center center no-repeat;
			}
		
		.video .bars {
			background: #fff;
			cursor: pointer;
			float: left;
			height: 3px;
			margin: 5px 0 0 15px;
			width: 465px;
		}
		
			.video .bars .played {
				background: #9e8d55;
				float: left;
				height: 3px;
			}
			
		.video .play-line {
			border-right: 1px #fff solid;
			float: left;
			height: 17px;
			margin: -7px 0 0 0;
			position: relative;
		}
		
		.video .timebox {
			color: #fff;
			float: left;
			margin: 0 15px;
		}
			
	#fullscreen {
		background: url(../images/all/backgrounds/btn-fullscreen.gif) center center no-repeat;
		color: #fff;
		float: left;
		height: 15px;
		margin: -3px 0 0 0;
		padding: 2px;
		text-indent: -10000px;
		width: 17px;
	}
	
	#fullscreen:hover {
		background: url(../images/all/backgrounds/btn-fullscreen-o.gif) center center no-repeat;
	}
	
	.video.fullscreen {
		background: #000;
		position: absolute;
		z-index: 10000;
	}
	
	.fullscreen .controls {
		bottom: 25px;
		left: 50%;
		margin-left: -286px;
	}
	
	.slideshow {
		height: 333px;
		overflow: hidden;
		position: relative;
		width: 595px;
	}
	
		.slideshow img {
			left: 0;
			margin: 0 !important;
			position: absolute;
			top: 0;
			z-index: 0;
		}
		
		.slideshow .previous,
		.slideshow .next {
			background-color: rgba(0,0,0,0.3);
			background-image: url(../images/all/backgrounds/slideshow-nav.png);
			background-position: 4px 50%;
			background-repeat: no-repeat;
			color: #fff;
			height: 333px;
			position: absolute;
			text-indent: -10000px;
			top: 0;
			width: 20px;
			z-index: 1;
		}
		
		.slideshow .previous { left: 0; }
		.slideshow .next { right: 0; background-position: -42px 50%; }
		
		.slideshow .previous:hover { background-position: 3px 50%; }
		.slideshow .next:hover { background-position: -41px 50%; }
	

/* ------------------------------------------------------------------------
	Agency Page
------------------------------------------------------------------------- */

	article.dark {
		margin-top: 0 !important;
		width: auto !important;
	}
	
	.agency .b-back-to-top {
		clear: both;
		display: block;
		float: right;
		height: 20px;
		margin: 0 20px 0 0;
		text-indent: -10000px;
		width: 106px;
	}
	
	.agency article {
		color: #333;
		float: left;
		padding-bottom: 0 !important;
	}
	
		.agency article h2 {
			margin: -25px 0 15px 0;
		}
	
		.agency article .quote {
			font-size: 2.1em;
			line-height: 1.2;
			margin: 0 50px 0 0;
			width: 495px;
		}
	
		.agency article aside {
			float: left;
			margin: 5px 30px 15px 0;
			width: 410px;
		}
	
			.agency article aside p { margin: 0 0 20px 0; }
	
	.steps {
		background: url(../images/all/backgrounds/dotted-separator.gif) 0 13px repeat-x;
		float: left;
		margin: 15px 0 25px 0;
	}
	
	.steps li { display: block; float: left; }
	
	.steps .number_1 { background: url(../images/all/backgrounds/number_1.gif) top left no-repeat; }
	.steps .number_2 { background: url(../images/all/backgrounds/number_2.gif) top left no-repeat; }
	.steps .number_3 { background: url(../images/all/backgrounds/number_3.gif) top left no-repeat; }
	.steps .number_4 { background: url(../images/all/backgrounds/number_4.gif) top left no-repeat; }
	.steps .number_5 { background: url(../images/all/backgrounds/number_5.gif) top left no-repeat; }
	.steps .number_6 { background: url(../images/all/backgrounds/number_6.gif) top left no-repeat; }
	.steps .number_7 { background: url(../images/all/backgrounds/number_7.gif) top left no-repeat; }
	.steps .number_plus { background: #fff url(../images/all/backgrounds/number_plus.gif) top left no-repeat; }
	
	.steps li {
		display: block;
		font-size: 1.6em;
		height: auto !important;
		margin: 0 !important;
		padding: 45px 10px 0 0;
		width: 113px !important;
	}


/* ------------------------------------------------------------------------
	The rake!
------------------------------------------------------------------------- */

	.rake #page article {
/*		background: url(../images/all/backgrounds/dotted-separator.gif) bottom left repeat-x;*/
		float: left;
	}
	
	.rake #page article .date {
		background: url(../images/all/backgrounds/tab-background.gif) bottom left repeat-x;
		height: 30px;
		margin: 0 0 0 -20px;
		text-transform: uppercase;
		width: 1005px;
	}
	
	.rake #page article .date span {
		display: block;
		float: left;
		margin: 9px 0 0 25px;
		text-align: center;
		width: 120px;
	}
	
	.rake #page article h2 {
		font-size: 2.7em;
		width: 575px;
	}
	
	.rake #page h2 a { color: #000; font-weight: normal; }
	.rake #page h2 a:hover { color: #81670c; text-decoration: none; }
	
	.rake #page img {
		float: left;
	}
	
	.rake #page aside {
		color: #333;
		float: left;
		margin: 0 0 0 35px;
		width: 350px;
	}
	
	.rake #page article.no-image aside {
		margin: 0 25px 0 0;
		width: 960px;
	}
	
	.rake #page aside p,
	.rake #page .content article aside .atom-body {
		margin-bottom: 15px;
		padding: 0 !important;
	}
	
	.post-footer {
		background: none;
		border-top: 1px #d1d1d1 solid;
		color: #666;
		margin: 10px 0 0 0;
		padding: 15px 0 0 0;
	}
	
		.post-footer a {
			font-weight: normal;
		}
		
		.post-footer p {
			float: left;
		}
		
		.post-footer p.fRight {
			float: right;
			font-size: 0.9em;
			width: 102px;
		}
		
		.post-footer p.fRight a {
			float: left;
			display: block;
			height: 18px;
			margin: 0 0 0 5px;
			padding: 0 !important;
			width: 18px;
			text-indent: -10000px;
		}
		
		.post-footer p.fRight span {
			float: left;
			margin: 5px 10px 0 0;
		}

	
	.rake-details article {
		color: #333;
		padding-right: 20px !important;
	}
		
		.rake-details article img {
			float: left;
			margin: 0 30px 30px 0;
		}
		
		.rake-details article p {
			margin: 0 0 20px 0;
		}
		
		.rake-details .atom-body {
			font-size: 1.1em;
			margin: 0 0 15px 0;
		}

		.rake-details .atom-body ul {
			list-style: none;
			margin: 0 0 20px 0 !important;
			width: auto;
		}
		
		.rake-details .atom-body .closet {
			margin: 0 0 30px 0;
			min-height: 332px;
		}
		
		.rake-details .post-footer {
			background: none;
			border-top: 1px #d1d1d1 solid;
			clear: none;
			margin-top: 0;
			padding: 15px 0 0 0;
		}
	
	.rake-details #b-back {
		margin: 45px 0 0 25px;
	}
	
	.rake-details .content h2 {
		color: #000;
		font-size: 2.7em;
		font-weight: normal;
		margin: 10px 0 28px 0;
	}
	
		.rake-details .content .atom-body h2 {
			font-size: 2em;
			margin: 0 0 15px 0;
		}
	
	#post-comments {
		background: #f3f1e9 url(../images/all/backgrounds/content_footer_pattern.gif) top left repeat-x;
		clear: left;
		float: left;
		height: 100%;
		margin: 0 30px 30px 0;
		padding: 0 20px;
		width: 295px;
	}
	
		#post-comments article {
			background: url(../images/all/backgrounds/dotted-separator.gif) bottom left repeat-x !important;
			color: #666;
			padding: 15px 0 !important;
		}
		
		#post-comments article.last { background: none; }
		
		#post-comments h3 { margin: 0; }
		
		#post-comments .author { color: #333; }
		
			#post-comments .author span { color: #81670c; }
		
	
	article#comment-form {
		float: left;
		padding: 0 !important;
		width: 600px !important;
	}
	
		article#comment-form h4 {
			font-size: 2.7em;
			font-weight: normal;
			margin: 0 0 10px 0;
		}
	
		article#comment-form form {
			margin: 35px 0 0 0;
		}
	
		article#comment-form label {
			color: #000;
			display: block;
			float: left;
			margin: 5px 0 0 0;
			width: 88px;
		}
	
		article#comment-form input {
			background: #eeeeee;
			border: 0;
			float: left;
			margin: 0 0 10px 0;
			padding: 4px;
			width: 220px;
		}
	
		article#comment-form input[type=image] {
			height: auto;
			margin: 10px 0 0 89px;
			padding: 0;
			width: auto;
		}
	
		article#comment-form textarea {
			background: #eeeeee;
			border: 0;
			float: left;
			height: 210px;
			width: 450px;
		}
		
		article#comment-form #reactions_errors {
			color: #fe0000;
			list-style: none;
			margin: 0 0 10px 0;
		}
		
			article#comment-form #reactions_errors li {
				margin: 0 0 5px 0;
			}