/* 
-----------------------------------------------------------------
	Film Archive
	feature-project.css
	
	Feature Project styles, which add to and override master.css
-----------------------------------------------------------------
*/

	body {
		background: url(/resources/legacy/feature-project/images/nzfa_featureproject_bg.jpg) no-repeat 0 137px;
	}
	
/*	menu
	LH Nav. Just thought it would be easier to rebuild this than muck about with the previous table setup */
	
	#menu {
		background: #930 url(/resources/legacy/feature-project/images/nav_featureproject_bg.jpg) repeat-y; 
	}
	#menu ul,
	#menu li {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	#menu li {
		display: inline; /* ie */
	}
	#menu a {
		display: block;
		font-family: Geneva, Verdana, Arial, Helvetica, san-serif; 
		font-size: 10px; 
		color: #ccc; 
		text-decoration: none;
		padding: 0.5em 11px 0.6em 11px;
		background: url(/resources/legacy/feature-project/images/menu-divider-dash.gif) repeat-x 0 100%;
	}
	#menu a:hover, #menu a:focus {
		text-decoration: underline;
	}
	#menu h2.navigation-head {
		margin: 0;
	}
	#menu .navigation-head a {
		background-color: #000;
		color: #ccc;
		font-weight: bold;
	}	
	
/*	main
	id added to td.border
*/

	#main p.intro {
		/* text-transform: uppercase;  Removed DI 2007-07-12 at request of client */
		font-weight: bold;
	}	
	#main p.top {
		margin: 6px 0 12px 0;
	}
	#main p.top a {
		font-weight: bold;
		font-family: Arial, Helvetica, sans-serif;
		display: block;
		padding-left: 14px;
		background: url(/resources/legacy/feature-project/images/link-arrows-top.gif) no-repeat 3px 50%;
	}
	
/*	
	General content images
	To simplify things and fast-track this, images aren't floated but rather aligned, 
	using the HTML attribute 'align'. In addition a css class with the same name (as the align value)
	is applied to take care of white space around the image .
	Code validation is the least of our concerns as the inherited code falls way short of the mark in this respect.
*/		
	
	#main p img.left,
	#main p img.right {
		border: 1px solid #000;	
	}
	#main p img.left {
		margin: 0 10px 8px 0;
	}
	#main p img.right {
		margin: 0 0 8px 10px;
	}	
	
/*	.features
	Wraps single feature divs on the project index page */

	.features {
		border-top: 1px solid #767676;
		height: 1px; /* ie6 */
	}
	html>body .features {
		height: auto;
	}
	.recent,
	.first .odd {
	/*	.row.first .off */
		padding-top: 3px;			
		background-image: url(/resources/legacy/feature-project/images/projects-drop-top.gif);
		background-repeat: repeat-x;
	}

/*	.feature */

	.features .feature {
		padding: 6px 9px 8px 9px;
		margin-bottom: 2px;
		position: relative; /* absolute wrap */
		height: 1px; /* ie6 */		
	}	
	.features .feature .liner {
		position: relative; /* op7, ns7, old safari */
	}
	html>body .features .feature {
		height: auto;
	}
	.features .row {
		border-bottom: 1px solid #fff; /* better op9 support than using a margin */
	}
	.features .row .feature {	
		width: 167px;
		float: left;
		margin-bottom: 0;				
	}	
	.features .row .first {	
	/*	.feature.first */
		width: 168px;	
		margin-right: 1px;
	}	
	.odd {
		background-color: #f2f2e5;
	}
	.even {
		background-color: #f5f5ed;
	}
	.indexed .odd a.hover {
	/*	applied with js, else behaviour will be buggy (loss of focus on a.img:focus) */
		background-color: #dcded1;
	}		
	.indexed .even a.hover {	
	/*	applied with js, else behaviour will be buggy (loss of focus on a.img:focus) */	
		background-color: #e4e5da;
	}		
	.features .last {
		background-image: url(/resources/legacy/feature-project/images/feature-last-bg.gif);
		background-repeat: no-repeat;
		background-position: 100% 100%;
	}
	.recent {
		margin-top: 4px;
		margin-bottom: 10px;
	}
	.indexed .feature {
		padding: 0;
		margin-bottom: 2px;
		position: relative;
	}	
	
/*	text */

	h3, h4 {
		color: #600;
		font-size: 14px;
		font-family: Arial, Helvetica, sans-serif;
	}
	h3 {
		padding: 13px 0 5px 0;
		margin: 0;
	}
	h4 {
		padding: 19px 0 7px 0;
		margin: 0;	
	}
	.recent h4,
	.indexed h5 {	
		font-family: Arial, Helvetica, sans-serif;		
	}
	.recent h4 {	
		padding: 0;	
		font-size: 13px;			
	}		
	.recent h4,	
	.recent p {
		margin: 0 0 0 73px; /* space for thumbnail */
	}	
	.indexed h5 {
		font-size: 11px;		
		margin: 0;
	}	

/*	a */
	
	.features a {	
		color: #036;
		text-decoration: none;	
	}
	.features a:hover, .features a:focus,
	.features a.hover {	
		text-decoration: underline;
	}
	.feature a.img {
	/*	thumbnail, positioned on top of link */
		position: absolute;
		top: 9px;
		left: 9px;		
	}		
	.features a.hover {	
		cursor: hand; /* ie 5x */
		voice-family: "\"}\""; 
		voice-family:inherit;
		cursor: pointer;
	}		
	.indexed .feature a {
	/*	position link on top of image */
		display: block;
		padding: 6px 9px 8px 52px;	
		height: 1px; /* ie6 */
	}
	html>body .indexed .feature a {
		height: auto;
	}
	
/*	img */
		

	.indexed .feature a.img {
		padding: 0;
	}
	.feature img.prop {
	/*	prop open space for absolutely positioned thumbnail */
		height: 45px; 
		float: right;
		
		position: relative;
		top: auto;
		left: auto;		
	}
	.indexed .feature img.prop {
		height: 28px; /* 25 + 3 */
	}				
	a img {
		border: 0;
	}		
	.recent h4 a img {
	/*	link arrows, because rh padded bg positioning not reliable in IE6/7 (multiline bug) */
		margin-left: 2px;	
		
		position: relative;
		top: auto;
		left: auto;
	}

/*	.clear */

	.feature .clear,
	.row .feature .clear {
		clear: right;
	}
	.feature .clear {
		display: block;
		line-height: 0; /* ie6 */
	}
	.row .clear {
		clear: both;
	}	
	
/*	index nav */	

	.alpha-nav {
		width: 270px;
	}
	.alpha-nav ul,
	.alpha-nav li {
		padding: 0;
		margin: 0;
		list-style: none;		
	}
	.alpha-nav li {
		display: inline;
		color: #444;
	}
	.alpha-nav li a {
		text-decoration: none;	
		font-size: 11px;	
		font-weight: bold;
	}
	.alpha-nav li a,
	.alpha-nav li a:hover, .alpha-nav li a:focus {
		font-family: Arial, Helvetica, sans-serif;
	}
	.alpha-nav li a:hover, .alpha-nav li a:focus {
		text-decoration: underline;	
	}	
	
	/* ------------------------------------------------------------------------------- */

	/* Opera 7.2+ (CSS 3) */
	@media all and (min-width: 0px) {

	}