/* Colors
======================================================================
	#1f1a19 : background - light
	#1b1717 : background - dark
	#191515 : background - darker, hover
	#2b2422 : tan - element
	#aba29c : tan - text
	#4c4644 : tan - text, subtle
	#cffb50 : green - text, links
====================================================================== */


@import url(base.css);


/* General
====================================================================== */
html {
	background: #1b1717 url(/_images/bg.png) repeat-x center top;
}

body {
	min-width: 760px;
	background: url(/_images/header-bg.png) no-repeat center top;
	font-size: .75em;
	line-height: 1.4em;
}

body > * {
	/* anti-aliasing hack for safari */
	text-shadow: 0 0 0 #000;
	/* anti-aliasing hack for firefox */
	/*opacity: 0.99999; */
}

form {
	/* safari selection border hack */
	opacity: 0.99999;
}

body, input, select, textarea {
	font-family: "Trebuchet MS", Trebuchet, arial, sans-serif;
	color: #aba29c;
	letter-spacing: 1px;
}

input, select, textarea  {
	font-size: .9em;
}

input.Checkbox, input.Radio {
	background: transparent;
	border: none;
}

code, kbd, pre { font-family: "Courier New", Courier, monospace; }

h2, h3 {
	color: #fff;
	font-size: 1.4em;
	line-height: 1.8em;
	font-family: "Trebuchet MS", Trebuchet, arial, sans-serif;
}

p {
	margin: 0 0 1em 0;
}

a:link,
a:visited {
	color: #ccc;
}

a:hover,
a:active {
	color: #fff;
}

::selection {
	background: transparent;
	color: inherit;
}
	
#page_wrapper {
	position: relative;
	margin: 0 auto;
	width: 760px;
}

#error_content {
	margin: 20px 0 -220px 210px;
	min-width: 336px;
	height: 336px;
	background: url(/_images/404.png) no-repeat left top;
}

#error_content div {
	padding: 120px 0 0 270px
}

#error_content div h2 {
	font-weight: bold;
	text-transform: uppercase;
}

#error_content div h2 em {
	color: #aba29c;
	font-size: .8em;
	font-style: normal;
}

#error_content div p {
	margin-top: -5px;
}

#message_wrapper {
	padding: 40px;
	text-align: center;
}

#message_wrapper h2 {
	margin-bottom: .5em;
}



	
/* Header
====================================================================== */
h1 span { display: none; }

h1 { position: absolute; }

#logo {
	position: absolute;
	top: 72px;
	left: 11px;
}
	
	

	
/* Navigation
====================================================================== */
#nav {
	position: absolute;
	top: 90px;
	left: 395px;
	height: 230px;
	width: 120px;
}

#nav li {
	float: left;
	display: block;
}

#nav li a {
	padding: 8px 14px;
	border-right: 4px solid #1f1a19;
	font-weight: bold;
	text-transform: uppercase;
	display: block;
}

#nav li.Current a:link,
#nav li.Current a:visited,
#nav li.Current:hover a,
#nav li.Current:active a {
	color: #fff;
}

#nav li a:link,
#nav li a:visited {
	color: #cffb50;
}

#nav li a:hover,
#nav li a:active {
	color: #fff;
}

#nav li.Last a {
	padding-right: 0;
	border-right: none;
}
	
	
	
	
/* Content
====================================================================== */	
#content_wrapper {
	margin: 0 auto;
	padding: 184px 0 0 0;
	width: 760px;
}

#content {
	padding: 10px;
	width: 740px;
	clear: both;
}

form div {
	margin: 6px 0;
	clear: left;
}

label {
	float: left;
	margin-right: 10px;
	padding: 5px 0;
	font-size: .8em;
	text-transform: uppercase;
	text-align: right;
	display: block;
}

label.inlineLabel {
	float: none;
	margin-right: 0;
	padding: 5px 0;
	font-size: .8em;
	text-transform: uppercase;
	text-align: left;
	display: inline;
}

label.inlineLabel input {
	float: none;
	margin: 0 5px 0 10px;
	width: auto !important;
}

input, textarea, select {
	padding: 5px;
	border: 2px solid #2b2422;
	background: #1d1918 url(/_images/form-bg.gif) repeat;
	color: #fff;
}

input:focus, textarea:focus {
	background: #191515;
}

input.Radio {
	margin-right: 10px;
	width: auto !important;
}

textarea {
	line-height: 1.4em;
}

.Submit,
#new_project_btn:link,
#new_project_btn:visited,
.EditBtns button {
	margin: 0 6px 0 0;
	padding: 3px 10px 3px 10px;
	border: 2px solid #2b2422;
	background: #2b2422;
	color: #cffb50;
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
}

.Submit:hover,
#new_project_btn:hover,
#new_project_btn:active,
.EditBtns button:hover {
	color: #fff;
}

.Msg {
	margin: 20px 10px 10px 10px;
	font-style: italic;
	text-align: center;
}

.Msg strong {
	color: #fff;
	font-weight: bold;
}
	
	
	
	
/* Home
====================================================================== */

#home_content {
	float: right;
	width: 439px;
}

#feature {
	width: 439px;
}

#feature h2,
#view_button,
#studio_space h2,
#view_by h2,
.Bio cite,
.Project h2,
.ClientSection h2,
.Project a:link span,
.Project a:visited span,
#phone_address h2, 
#contact_content h2, 
#contact_newsletter h2, 
#contact_quote h2 {
	padding: 0 10px;
	height: 25px;
	background: url(/_images/header-top_right.png) no-repeat right top;
	font-size: 1em;
	line-height: 2.4em;
	font-weight: bold;
	text-transform: uppercase;
}

#feature h2 span,
.Project h2 span,
.ClientSection h2 span,
.Project a:link span em,
.Project a:visited span em,
#testimonial cite em,
.ClientTestimonial cite em,
.ClientTestimonialLast cite em {
	font-style: normal;
	color: #aba29c;
}

#feature img,
.Project img.Thumbnail {
	height: 200px;
	width: 435px;
	border: 2px solid #2b2422;
	border-width: 0 2px 2px 2px;
	background: #2b2422;
}

#view_button {
	float: right;
	margin-top: 10px;
	padding: 0;
}

#view_button a:link,
#view_button a:visited {
	position: relative;
	left: -15px;
	padding: 0 0 0 16px;
	height: 25px;
	background: url(/_images/view_button-bg.png) no-repeat left top;
	color: #cffb50;
	line-height: 2.4em;
	font-weight: bold;
	text-transform: uppercase;
	display: block;
}

#view_button a:hover,
#view_button a:active {
	color: #fff;
}

#blurb {
	margin-top: 75px;
	padding-bottom: 6px;
	font-size: .9em;
	line-height: 1.4em;
	background: url(/_images/blurb-bottom.png) no-repeat left bottom;
}

#blurb h2 {
	position: relative;
	top: -28px;
	margin-bottom: -28px;
	height: 28px;
	width: 439px;
	background: url(/_images/blurb-top.png) no-repeat left top;
}

#blurb h2 span {
	display: none;
}

#blurb p {
	margin: 0;
	padding: 4px 10px;
	border: 2px solid #2b2422;
	border-width: 0 2px;
}

#blurb strong {
	color: #fff;
	font-weight: normal;
}

#testimonial {
	position: absolute;
	top: 190px;
	height: 225px;
	width: 175px;
}

#testimonial div {
	position: absolute;
	bottom: 0;
	background: #2b2422;
}

#testimonial blockquote {
	margin-top: -7px;
	padding: 8px 10px;
	border-bottom: 2px solid #1f1a19;
	background: url(/_images/testimonial-top.png) no-repeat center top;
	font-size: .85em;
	line-height: 1.3em;
	display: block;
}

#testimonial cite {
	margin-bottom: -27px;
	padding: 5px 10px 28px 10px;
	background: url(/_images/testimonial-bottom.png) no-repeat center bottom;
	color: #fff;
	font-size: .9em;
	font-weight: bold;
	font-style: normal;
	display: block;
}

#testimonial a {
	white-space: nowrap;
}

#home_sidebar {
	margin-top: 295px;
	/* to initial content flash */
	display: none;
}

#home_sidebar .toggler {
	margin-top: 10px;
	height: 25px;
	width: 255px;
}

#home_sidebar .toggler a {
	padding: 6px 10px 4px 10px;
	width: auto;
	background: url(/_images/home_sidebar.png) no-repeat 0 0;
	display: block;
	font-weight: bold;
	text-transform: uppercase;
}

#home_sidebar .toggler a:link,
#home_sidebar .toggler a:visited {
	color: #cffb50;
}

#home_sidebar .toggler a:hover,
#home_sidebar .toggler a:active,
#home_sidebar .toggler a.Selected:link,
#home_sidebar .toggler a.Selected:visited {
	color: #fff;
}

#home_sidebar .toggler a.Selected {
	background: url(/_images/home_sidebar.png) no-repeat -265px 0;
}

#home_sidebar form, #home_sidebar ul {
	padding: 12px 8px;
	width: 235px;
	border: 2px solid #2b2422;
	border-width: 0 2px 2px 2px;
}

#home_sidebar ul {
	padding: 3px 0;
	width: 251px;
	border: 2px solid #2b2422;
	border-width: 0 2px 2px 2px;
}

#home_sidebar li a:link,
#home_sidebar li a:visited {
	padding: 4px 16px;
	color: #aba29c;
	font-size: .85em;
	display: block;
}

#home_sidebar li.Row1 a:link,
#home_sidebar li.Row1 a:visited {
	background: url(/_images/form-bg.gif) repeat;
}

#home_sidebar li a:hover,
#home_sidebar li.Row1 a:hover {
	background: #191515;
	color: #fff;
}

#home_sidebar li a:link span,
#home_sidebar li a:visited span,
#home_sidebar li.Row1 a:link span,
#home_sidebar li.Row1 a:visited span {
	margin-right: 4px;
	color: #4c4644;
}

#home_sidebar label {
	width: 60px;
}

#newsletter_signup label {
	width: 40px;
}

#home_sidebar input {
	width: 145px;
}

#newsletter_signup input {
	width: 165px;
}

#home_sidebar input.Last {
	width: 80px;
}

#newsletter_signup input.Last {
	width: 100px;
}

#home_sidebar .Submit {
	padding: 2px 0 3px 0;
	width: 60px;
}




/* The Team
====================================================================== */
.Bio {
	float: left;
	margin-right: 34px;
	padding-top: 120px;
	width: 224px;
	cursor: pointer;
}

#michael { margin-right: 0; }

#christophe { background: url(/_images/theteam/christophe.png) no-repeat 70px 0; }
#christophe.JustinFocus { background-image: url(/_images/theteam/christophe-right.png); }
#christophe.MichaelFocus { background-image: url(/_images/theteam/christophe-right-far.png); }

#justin { background: url(/_images/theteam/justin.png) no-repeat 25px 0; }
#justin.EstebanFocus { background-image: url(/_images/theteam/justin-left.png); }
#justin.MichaelFocus { background-image: url(/_images/theteam/justin-right.png); }

#michael { background: url(/_images/theteam/michael.png) no-repeat 10px 0; }
#michael.EstebanFocus { background-image: url(/_images/theteam/michael-left-far.png); }
#michael.JustinFocus { background-image: url(/_images/theteam/michael-left.png); }

#esteban { background: url(/_images/theteam/esteban.png) no-repeat 70px 0; }
#esteban.JustinFocus { background-image: url(/_images/theteam/esteban.png); }
#esteban.MichaelFocus { background-image: url(/_images/theteam/esteban.png); }

.Bio cite {
	/* defined by feature h2 */
	color: #fff;
	font-style: normal;
	display: block;
	cursor: default;
}

.Bio blockquote {
	padding-bottom: 6px;
	font-size: .9em;
	line-height: 1.4em;
	background: url(/_images/bio-bottom.png) no-repeat left bottom;
	cursor: default;
}

.Bio blockquote p {
	margin: 0;
	padding: 4px 10px;
	border: 2px solid #2b2422;
	border-width: 0 2px;
}

#studio_space {
	padding-top: 30px;
	clear: left;
}

#studio_space h2 {
	/* defined by feature h2 */
}

#studio_space_photos {
	padding: 2px;
	height: 196px;
	border: 2px solid #2b2422;
	border-width: 0 2px 2px 2px;
}

#studio_space_photos div img {
	margin: 2px;
	opacity: .8;
}

#studio_space_photos div img:hover {
	margin: 2px;
	opacity: .999;
}

#studio_space_photos div.Left,
#studio_space_photos div.Floats img {
	float: left;
}

#studio_space_photos div.Floats {
	width: 381px;
	margin-right: -2px;
}




/* Portfolio
====================================================================== */
#portfolio_sidebar, #contact_sidebar {
	margin-top: 25px;
	width: 150px;
}

#view_by h2, #phone_address h2 {
	/* defined by feature h2 */
	background: url(/_images/header-top_left.png) no-repeat left top;
}

#view_by li a:link,
#view_by li a:visited {
	padding: 2px 8px 0 8px;
	border: 1px solid #2b2422;
	border-width: 0 2px 1px 2px;
	background-repeat: no-repeat;
	background-position: 122px 4px;
	color: #cffb50;
	line-height: 1.8em;
	font-weight: bold;
	text-transform: uppercase;
	display: block;
}

#view_by li a:hover,
#view_by li a:active {
	background-color: #191515;
	color: #fff;
}

#view_by li.Last a:link,
#view_by li.Last a:visited {
	border-bottom: 2px solid #2b2422;
}

#view_by li.Current, #view_by li.LastCurrent {
	background: #b1ff00 url(/_images/portfolio_current_bg.png) repeat left top;
}

#view_by li.Current a:link,
#view_by li.Current a:visited,
#view_by li.Current a:hover,
#view_by li.Current a:active,
#view_by li.LastCurrent a:link,
#view_by li.LastCurrent a:visited,
#view_by li.LastCurrent a:hover,
#view_by li.LastCurrent a:active {
	padding: 3px 10px 0 10px;
	border: 0;
	background-color: transparent;
	background-position: 124px -28px;
	color: #1b1717;
}

#view_by li.LastCurrent a:link,
#view_by li.LastCurrent a:visited,
#view_by li.LastCurrent a:hover,
#view_by li.LastCurrent a:active {
	border-bottom: 1px solid #2b2422;
}

.CatRecent { background-image: url(/_images/symbols/recent.gif); }
.Cat3d { background-image: url(/_images/symbols/3d.gif); }
.CatFlash { background-image: url(/_images/symbols/flash.gif); }
.CatGallery { background-image: url(/_images/symbols/gallery.gif); }
.CatGame { background-image: url(/_images/symbols/game.gif); }
.CatIdentity { background-image: url(/_images/symbols/identity.gif); }
.CatJius { background-image: url(/_images/symbols/jius.gif); }
.CatNewsletter { background-image: url(/_images/symbols/newsletter.gif); }
.CatStore { background-image: url(/_images/symbols/store.gif); }
.CatVideo { background-image: url(/_images/symbols/video.gif); }
.CatWeb { background-image: url(/_images/symbols/web.gif); }

#search {
	margin: 30px 0;
}

#search label {
	float: none;
	margin: 0;
	padding: 0;
	font-size: inherit;
	text-transform: none;
	text-align: left;
	display: inline;
}

#search label span {
	display: none;
}

#search input {
	width: 136px;
	border-width: 2px 2px 0 2px;
}

#search_btn,
#sidebar_buttons li a:link,
#sidebar_buttons li a:visited,
a.Prev:link,
a.Prev:visited,
span.Prev,
a.Next:link,
a.Next:visited,
span.Next {
	margin-top: 0;
	padding: 6px 10px 4px 10px;
	width: 150px;
	background: url(/_images/portfolio_sidebar.png) no-repeat 0 0;
	border: none;
	color: #cffb50;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}

span.Prev,
span.Next {
	cursor: default;
}

#sidebar_buttons li a:link,
#sidebar_buttons li a:visited {
	margin: 0 0 8px 0;
	background-image: url(/_images/portfolio_sidebar_btn.png);
	display: block;
}

#search_btn:hover,
#sidebar_buttons li a:hover,
#sidebar_buttons li a:active,
#sidebar_buttons li.Current a:link,
#sidebar_buttons li.Current a:visited,
a.Prev:hover,
a.Prev:active,
a.Next:hover,
a.Next:active {
	color: #fff;
}

#portfolio_content, #contact_content {
	position: absolute;
	left: 196px;
	margin-top: 25px;
	width: 554px;
}

#result_text, #result_text_none {
	position: absolute;
	top: -30px;
	width: 100%;
	color: #4c4644;
	font-size: .9em;
	text-align: left;
}

#result_text_none {
	position: static;
}

#result_text strong, #result_text_none strong {
	color: #aba29c;
	font-weight: normal;
}

.Project, .ClientSection {
	margin-bottom: 30px;
}

.Project h2, .ClientSection h2 {
	/* defined by feature h2 */
}

.Project h2 a {
	position: relative;
	display: inline;
}

.Project h2 span.Icons {
	position: absolute;
	right: 8px;
	height: 16px;
}

.Project h2 img {
	margin: 5px 0 0 5px;
	height: 16px;
	width: 16px;
	background-repeat: no-repeat;
	background-position: 0 0;
}

.Project img.Thumbnail {
	/* defined by feature h2 */
	width: 550px;
}

.Project a {
	position: relative;
	display: block;
}

.Project a.Additional {
	display: none;
}

.Project a:link span,
.Project a:visited span {
	/* defined by feature h2 */
	position: absolute;
	bottom: 0;
	right: 0;
	margin-bottom: 0;
	background: url(/_images/header-top_left.png) no-repeat left top;
	display: none;
	/*opacity: 0;
		display: block;
		-webkit-transition: opacity .25s linear;*/
}

.Project a:hover span,
.Project a:active span {
	display: block;
	/*opacity: 1;*/
}

.Project a:link span em,
.Project a:visited span em {
	font-style: normal;
}

#pagination {
	margin: -5px 0 25px 0;
	padding: 5px 0;
	height: 25px;
	width: 100%;
	text-align: center;
}

a.Prev:link,
a.Prev:visited,
span.Prev,
a.Next:link,
a.Next:visited,
span.Next {
	float: left;
	padding: 6px 0 4px 0;
	width: 45px;
	background-image: url(/_images/page-active.png);
	display: block;
}

span.Prev,
span.Next {
	background-image: url(/_images/page-inactive.png);
	color: #aba29c;
}

a.Prev:link,
a.Prev:visited,
span.Prev {
	padding-left: 15px;
	background-position: left top;
	text-align: left;
}

a.Next:link,
a.Next:visited,
span.Next {
	padding-right: 15px;
	background-position: right top;
	text-align: right;
}

#pagination div {
	float: left;
	margin: 0 2px;
	padding: 6px 10px 2px 10px;
	height: 17px;
	background: #2b2422;
	color: #fff;
	font-size: .9em;
	font-weight: bold;
	letter-spacing: 2px;
}

#pagination div a:link,
#pagination div a:visited {
	color: #cffb50;
}

#pagination div a:hover,
#pagination div a:active {
	color: #fff;
}

#client_content {
	border: 1px solid #2b2422;
	border-width: 0 2px 2px 2px;
	background: url(/_images/client-bg.gif) repeat-y 275px 0;
}

#client_content ul {
	width: 275px;
}

#client_content ul li {
	position: relative;
	border-bottom: 1px solid #2b2422;
	font-size: .9em;
}

#client_content ul li.Last {
	border: none;
}

#client_content ul li a:link,
#client_content ul li a:visited,
#client_content ul li span {
	margin-right: 0;
	padding: 4px 8px 3px 8px;
	display: block;
}

#client_content ul li span.Date {
	position: absolute;
	right: 0;
}

#client_content ul li a:link,
#client_content ul li a:visited {
	color: #ccc;
}

#client_content ul li a:link em,
#client_content ul li a:visited em,
#client_content ul li span em {
	color: #aba29c;
	font-style: normal;
}

#client_content ul li a:hover,
#client_content ul li a:active {
	background: #191515;
}

.ClientTestimonial,
.ClientTestimonialLast {
	float: right;
	margin: 0;
	padding: 20px;
	width: 234px;
	border-bottom: 1px solid #2b2422;
	clear: right;
}

.ClientTestimonialLast {
	border: none;
}

.ClientTestimonial blockquote,
.ClientTestimonialLast blockquote {
	font-size: .85em;
	line-height: 1.3em;
	display: block;
}

.ClientTestimonial cite,
.ClientTestimonialLast cite {
	margin-top: 5px;
	color: #ccc;
	font-size: .9em;
	font-weight: bold;
	font-style: normal;
	display: block;
}

.ClientTestimonial cite em,
.ClientTestimonialLast cite em {
	white-space: nowrap;
}



/* Contact
====================================================================== */
#contact_sidebar {
	/* defined by portfolio_sidebar */
}

.vcard {
	margin-bottom: 30px;
}

.vcard a.url, .vcard div.country-name, .vcard .photo {
	display: none;
}

.vcard .tel {
	padding: 5px 10px 3px 10px;
	border: none;
	background-color: transparent;
	background-position: 124px -28px;
	background: #b1ff00 url(/_images/portfolio_current_bg.png) repeat left top;
	color: #1b1717;
	font-weight: bold;
}

.vcard .adr {
	padding: 8px;
	border: 1px solid #2b2422;
	border-width: 0 2px 2px 2px;
	font-size: .9em;
}

#contact_content {
	/* defined by portfolio_content */
}

#contact_content label {
	width: 60px;
}

#contact_content label.inlineLabel,
#contact_content input,
#contact_content textarea {
	width: 200px;
}

#contact_content label.inlineLabel {
	margin-left: 60px;
}

#contact_content .Submit {
	margin-left: 70px;
	width: 214px;
}

#contact_form form {
	position: relative;
	padding: 12px 8px;
	margin-bottom: 36px;
	border: 2px solid #2b2422;
	border-width: 0 2px 2px 2px;
	background: url(/_images/contact-bg.gif) repeat-y left top;
}

#recipient {
	position: absolute;
	left: 0;
	width: 160px;
	padding: 0 20px;
	font-size: .9em;
}

#recipient label {
	margin-bottom: 10px;
	width: 100%;
	text-align: left;
}

#recipient .Default {
	color: #fff;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid #2b2422;
}

#message_content {
	margin-left: 215px;
}

#honeypot, .BrowserDetected {
	position: absolute;
	left: -4000px;
	height: 1px;
	width: 1px;
	visibility: hidden;
}

#contact_newsletter,
#contact_quote {
	margin-bottom: 36px;
	width: 259px;
	float: left;
}

#contact_newsletter {
	margin-right: 36px;
}

#contact_newsletter div,
#contact_quote div {
	padding: 8px;
	border: 2px solid #2b2422;
	border-width: 0 2px 2px 2px;
	font-size: .95em;
	line-height: 1.5;
}

#contact_newsletter div p,
#contact_quote div p {
	margin-bottom: 0;
}

a.ContactBtn:link,
a.ContactBtn:visited {
	display: block;
	background: #2b2321;
	color: #cffb50;
	margin-top: 8px;
	padding: 5px 0;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
}

a.ContactBtn:hover,
a.ContactBtn:active {
	color: #fff;
}



/* Footer
====================================================================== */
#footer {
	margin: 30px 0 20px 0;
	color: #4c4644;
	font-size: .8em;
}