/* 
	© Copyright Catch New York
	catch gray #887E6F
	catch "ron" burgundy #8E0C3A
*/

body {
	background-color:#FFF;
	color:#887E6F;
	font-family:'Helvetica',Arial,Sans-Serif;
	font-size:62.5%;
	margin:50px 0 130px 40px;
	padding: 0;
	text-align:left;
	}

a, a:visited { color: #887E6F; text-decoration: none }
a:hover, a:active { color: #8E0C3A; text-decoration: none }

p,div,span { margin: 0; padding: 0; }



/* Structure */
#wrapper {
	width: 100%;
	height: 100%;
	}

#rewrap {
	width: 1000px;
	}

/* Home Page */
#homepage { 
	width: 970px; 
	margin: 0 auto; 
	padding-top: 75px;
	}
	#homepage h1 { display: none; }
	#homepage p { font-size: 2em; line-height: 1.2em; margin: 30px 0 20px 100px; }
	#homepage a, #homepage a:visited { color: #8E0C3A; text-decoration: none; }
	#homepage a:hover, #homepage a:active { color: #887E6F; }
	


/* Structure */

#navigation ul { 
	padding: 0;
	margin: 0 0 20px 0;
	}
#navigation ul li { 
	list-style: none;
	margin: 0; 
	padding: 0;
	}
#site, #category, #client { }
#site { font-size: 2.3em; }
	#site li {}
#category { font-size: 1.6em; }
#category ul {
 	margin-top: 5px; 
 	font-size: .7em;
 	line-height: 1.3em;
 	}
 	ul#category .subpage a, ul#category .subpage a:visited { text-decoration: none; color: #887E6F;}
	ul#category .subpage a:hover, ul#category .subpage a:active { text-decoration: none; color: #8E0C3A;}
	
	
 		

#navigation a, #navigation a:visited { text-decoration: none; color: #887E6F;}
#navigation a:hover, #navigation a:active { text-decoration: none; color: #8E0C3A;}
	
	#navigation .onpage a, #navigation .onpage a:visited { text-decoration: none; color: #8E0C3A;}
	#navigation .onpage a:hover, #navigation .onpage a:active { text-decoration: none; color: #887E6F;}
	
	.navwidth { width: 1000px; }
	.navwidthhome { margin: 0 auto; width: 800px;}


#catchny, #navigation {float: left;}
#catchny { width: 125px; }
#catchny img { border: 0;}
#navigation { width: 220px; }
#navigation img { border: 0px; }
#content {
	margin: 0;
	padding: 0;
	float: left; 
	width: 615px;
	overflow: hidden;
	}
	#content h1 {display: none;}
	#content .introcopy { 
		width: 550px;
		padding: 0;
		font-size: 2.3em; 
		line-height: 1.2em; 
		margin: 50px 0 0px 0;
		color: #bbb4a6;
		}
	.introcopy a, .introcopy a:visited { color: #8E0C3A; }
	.introcopy a:hover, .introcopy a:active { color: #887E6F; }



.logo { float: left; width: 130px; height: 50px; }
.logo img { margin: 0 0 0 5px; padding: 0;}
.logo p { margin: 0; padding: 0; text-align: right; width: 115px; font-size: .7em; }
.arrow, .noarrow, .arrowon, .backarrow { margin: 15px 5px 0 0; padding-right: 15px; }
.arrow, .arrowon { float:left; background: url(/public/images/arrow.gif) no-repeat 100% 65%;}
.noarrow { float: left; } 
.arrowon { text-decoration: none; color: #8E0C3A; }
.backarrow { float: right; padding-left: 20px; background: url(/public/images/arrows-back.gif) no-repeat 0 65%;}

/* Work */

#thumbnails { 
	background-color: none;
	width: 615px;
	height: 300px;
	margin-top: 0px;
	}
	#thumbnails img { 
		border: 0px; 
		margin: 0 5px 5px 0;
		height: 50px;
		width: 50px;
	}
.project { 
	margin: 0; 
	width: 600px; 
	height: 600px;
	display: inline;
	
	}
.project_assets { 
	width: 615px;
	height: 550px;
	}
	.project_assets img {border: 0;}
#browse { 
	float: left; 
	width: 615px; 
	margin: 52px 0 50px; 
	padding: 0; 
	}
	#browse h2 { 
		font-size: 1em; 
		color: #8E0C3A;
		margin: 20px 0 0 0;
		padding: 0; }
	#browse p {
		width: 600px;
		line-height: 1.2em;
		font-size: .9em; 
		margin: 5px 0 0 0;
		padding: 0; }
		
.interactive {border: 0 solid #e7e5e2;}

	
/* About */
#about { width: 870px; margin: 0; padding: 0 0 80px 0;}
#about ul { margin: 0; padding: 0; }
#about ul li { list-style: none; float: left; width: 320px; margin: 50px 30px 0 0;}
#about ul li p { margin: 0 20px 20px 0; font-size: 1.1em; line-height: 1.2em; }

#contact-info {
	margin: 0;
	padding-top: 200px;
	font-size: 1.2em;
	line-height: 1.3em;
	}
	#contact-info span { color: #8E0C3A;}
	#contact-info .phone, #contact-info .fax { }
	#contact-info .email a, #contact-info .email a:visited { text-decoration: none; color: #8E0C3A; }
	#contact-info .email a:hover, #contact-info .email a:active  { text-decoration: none; color: #887E6F; }
#studio h3 { 
	font-size: 1.4em;
	padding-bottom: 10px; 
	width: 670px; 
	border-bottom:5px solid #887E6F ;
	}

/* Experience */
#experience { 
	width: 650px; 
	height: 200px; 
	}
	#experience img { margin: 0 10px 5px 0; padding: 0; border: 0;}

/* Footer */
#footer {
	margin-top: 0px;
	padding:0;
	height: 0px;
	clear: right;
	}

#footnote { width: 100%; }
#footimg {
	width: 100%;
	text-align: right;
	}
#footborder {
	margin-left: 220px; 
	padding: 0px 0 0px 0; 
	border-bottom: 2px solid #887E6F; 
	}
#footimg img { border: 0px; }
#footline h4 {
	float: left;
	font-size: 14px; 
	color: #887E6F;
	font-weight: 100;
	display: inline;
 	padding: 10px 0px 0px 0px;
	margin: 0px;
	line-height: 14px;
	text-transform: capitalize;
	}
	#footline h4 span {
		color: #a60438;
		font-size: 14px; 
		line-height: 14px;
	}
#footline h5 {
	float: right;
	display: inline;
	padding: 10px 40px 0px 0px;
	font-size: 14px;
	margin: 0px;	
	line-height: 14px;
	font-weight: 100;
	text-transform: capitalize;
	}

#footer span { font-size: 1.1em; color: #887E6F; }

#homefooter { margin: 0 auto; width: 800px;}
#homefooter span { font-size: 1.1em; color: #887E6F; }
.footcny { text-transform: uppercase; font-weight: bold;}

a.mover { background: #900; padding: 6px 12px; position: absolute;
								      color: white; font-weight: bold; text-decoration: none; }


/* OTHER */
.clearboth { clear: both; }

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 615px;
    height: 575px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}

.jcarousel-skin-tango .jcarousel-container { }

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 615px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: 615px;
    height: 600px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 615px;
    height: 600px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal { }

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    left: 50px;
    top: -30px;
    width: 50px;
    height: 25px;
    cursor: pointer;
    background: transparent url(/public/images/next-arrows.jpg) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position: -51px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -100px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -150px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: -30px;
    width: 50px;
    height: 25px;
    cursor: pointer;
    background: transparent url(/public/images/prev-arrows.jpg) no-repeat;
    background-position: 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    background-position: -50px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -100px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -150px 0;
}