/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549

ar_mod:
	- Removed: html{color:#000;background:#FFF;}
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}


body {
	font: 14px "Myriad Pro", "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: center;
	background-color: #524a48;
	background-image: url(bg-brown_noise-lighter_01.gif);
}

p		{ margin-bottom: 1em; }
strong	{ font-weight: bold;  }
em		{ font-style: italic; }

a {
	/*display: block;*/
	outline: none;
	
	padding: 2px;
	text-decoration: none;
	
	/*color: #726764;*/ /*greyish brown*/
	/*color: #85635a;*/ /*browner brown*/
	/*color: #3691c0;*/ /*blue*/
	color: #676664; /*grey*/
	color: #475a5e;
	text-decoration: none;
	background-color: rgba(168,226,218,0); /*Defines the start color to avoid the "flash of grey" that occurs during -webkit-transitions*/
	
	-webkit-transition: all 0.1s linear;
}


a:hover {
	color: black;
	background-color: rgba(35,150,190,0.20);
}

a:active {
	color: white;
	background-color: #2396be; /*blue*/
	border-color: #2396be;
}


















/*--------------------------------------------*/
/* Structure */
/*--------------------------------------------*/



#container {
	position: relative;
	width: 960px;
	margin: 0 auto;
	margin-top: 40px;
	min-height: 640px;	
}

/*No-Scrollbar Compensation*/
/*#home #container {margin-right: 15px;}*/
#home #container	{margin-right: 0px;}

#shortfilms #container,
#links #container,
#bio #container		{margin-right: 0;}

/*Long pages*/
#container			{margin-right: -15px;}

/*Long pages (iPhone fix)*/
@media only screen and (max-device-width: 480px) {
  #container {
    margin-right: 0px;
  }
}



/*clearfix*/
#container:after {
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
	height: 0;
}

#container {display: inline-block;}








h1 {
	position: absolute;
	top: 85px; /*Midway between top and #nav*/
	left: 30px;
	width: 233px;
	height: 43px;
	text-indent: -666em;
	background-image: url(lowellnorthrop-director-white.png);
	z-index: 1;
}

h1 a {
	display: block;
	width: 100%;
	height: 100%;
}

h1 a:hover,
h1 a:active	{background: none;}








#nav {
	position: absolute;
	top: 205px;
	left: 55px;
	width: 140px;
	
	padding: 20px;
	
	font-size: 16px;
	/*line-height: 9px;*/
	
	text-align: right;
	text-transform: lowercase;
	
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	
	-moz-box-shadow: 1px 1px 1px rgba(114,103,100,0.9);
	-webkit-box-shadow: 1px 1px 1px rgba(114,103,100,0.9);
	box-shadow: 1px 1px 1px rgba(114,103,100,0.9);
	
	background-color: rgba(255,254,255,0.8);
	
	-webkit-transition: background-color 0.2s linear;
	z-index: 1;
}

#nav { /*a little wider to line up with the director and still centered with LN*/
	left: 51px;
	width: 150px;
}

#nav:hover			{ background-color: rgba(255,254,255,1); }

#nav li				{ border-bottom: 1px solid rgba(114,103,100,0.22); }
#nav li:last-child	{ border-bottom: none; }

#nav li a {
	display: block;
	/*color: #726764;*/ /*greyish brown*/
	/*color: #85635a;*/ /*browner brown*/
	/*color: #3691c0;*/ /*blue*/
	color: #676664; /*grey*/
	/*text-shadow: #fff 1px 1px 0;*/
	
	padding: 11px 0 8px 0;
	padding-right: 7px;
	
	text-decoration: none;
	
	background-color: rgba(168,226,218,0); /*Defines the start color to avide the "flash of grey" that occurs during -webkit-transitions*/
}

#nav:hover li a { color: #7f7e7b; }

#nav li:first-child a {
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}

#nav li:last-child a {
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}

#nav li a:hover {
	color: black;
	padding-right: 9px;
	font-weight: bold;	
	/*background-color: rgba(124,111,102,0.1);*/ /*greyish*/
	background-color: rgba(35,150,190,0.20);
}

#nav li a:active {
	color: white;
	/*background-color: rgba(124,111,102,0.2);*/ /*greyish-tan*/
	background-color: #2396be; /*blue*/
	border-color: #2396be;
}

/*This is an interesting way to possibly select adjacent links to make the top/bottom border change color even if each link has only a border-top assigned.*/

/*ul#nav li:hover + li a  {
	border-color: red;
}*/



/*--------------------------------------------*/
#nav li.current,
#nav li.current a,
#nav li.current a:hover {
	padding-right: 4px;
	
	color: white;
	font-weight: bold;
	
	cursor: default;
	
	/*background-color: #b14920;*/ /*rust*/
	/*background-color: #1fa61e;*/ /*green*/
	background-color: #208cb1;
	border-color: rgba(114,103,100,0.3);
}
/*--------------------------------------------*/







#content {
	position: relative;
	float: right;
	
	/*margin-top: 204px;*/ /*Aligns the top of the #content box to the top of the #nav box*/
	padding: 30px;

	/*Flush right - Not great for iPhones*/
	width: 600px;

	/*Medium*/
	/*margin-right: 35px;
	width: 565px;*/
	
	/*Narrowist - Even on both sides*/	
	/*margin-right: 60px;
	width: 540px;*/
	
	text-align: left;
	
	background-color: white;
	
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}

#footer {
	clear: both;
	float: right;
	
	padding: 40px 0;
	margin-right: 35px;
	width: 625px;

	width: 660px;
	margin-right: 0px;
	
	color: #312e2c;
	text-shadow: #635857 1px 1px 0;
	font: 10px "Lucida Grande", Lucida, Verdana, sans-serif;
}

#home #footer {
	width: 960px;
	margin-right: 0px;
}
















/*--------------------------------------------*/
/* Page Specific */
/*--------------------------------------------*/


#goat {
	position: relative;
	width: 960px;
	height: 640px;	
	
	border: 1px solid rgba(79,67,64,0.8);
	border-bottom-color: rgba(110,100,97,0.8);
	
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	/*Pre d1.3 = 8px*/
	/*Pre d1.10 = 12px*/
	
	background: url(../images/goat.jpg) no-repeat;
	background: url(../images/goat-fixed_left_01.jpg) no-repeat;
	
	/*-moz-box-shadow: 1px 1px 1px rgba(114,103,100,0.9);
	-webkit-box-shadow: 1px 1px 1px rgba(114,103,100,0.9);
	box-shadow: 1px 1px 1px rgba(114,103,100,0.9);*/	
}









/*#############################################
Entries - "Music Videos", "Commercials", "Short Films", "Links"
#############################################*/

.entry {
	display: block;
	position: relative;

	margin: 0 auto;
	margin-bottom: 30px;
	padding-bottom: 40px;
	
	height: 160px;

	border-bottom: 1px solid #e3e3e3;
}

.entry.last {
	margin-bottom: 0;
	padding-bottom: 0;
	height: 170px;
	border: 0;
}

.entry a {
	display: block;
	
	margin: -10px;
	padding: 10px;

	color: #475a5e;
	text-decoration: none;
	
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	
	/*text-shadow: #fff 1px 1px 0;*/
	
	/*background: -webkit-gradient(linear, left top, left bottom, from(rgba(35,150,190,0.20)), to(transparent));*/	
}

.entry a:hover		{ background-color: rgba(35,150,190,0.20); }
.entry a:active		{ background-color: rgba(35,150,190,0.30); }
.entry a:hover img	{ border-color: white; }




.entry img {
	display: block;

	/*background-color: grey;*/
	
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px; /*Properly masks the thumnail to get rid of the white edges since it's a .JPG. Doesn't work in FireFox*/
	
	border: 3px solid white;
	margin: -3px;
}

.entry .infoblock {
	display: block;
	position: absolute;
	left: 240px; /*was 242px*/
	bottom: 30px;

	-webkit-transition: all 0.1s linear;
}

/*.entry*/ .last .infoblock { bottom: 0px; }

.entry a h3 {
	/*color: #d11a0e;*/
	/*color: #b3a29d;*/
	color: #262626;
}

.entry a h3 { /*.brand*/
	padding-bottom: 8px;
	font-size: 23px;
	font: 19px Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	
	/*-webkit-transition: all 0.1s linear;*/
}

.entry a:hover h3 {
	color: black;
	font-weight: bold;
}

.entry a .title {
	display: inline;
	position: relative;
	top: -6px;
	left: -7px;

	padding: 5px;
	padding-bottom: 2px;
	
	font-size: 15px;
}

.entry a:hover .title { color: black; }

.entry a:active h3,
.entry a:active .title {
	color: white;
}






/*#############################################
Bio
#############################################*/

#bio p a {
	padding-top: 4px;
	color: black;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	-webkit-transition: none;
	
	/* 2010.07.30/ar:
	I have to turn off the transition because -webkit-transition does NOT apply to "text-decoration: underline", so the text transitions to the blue color nice and smoothly, but the underline just pops in. So rather than leave it, which looks wrong, I'm turning off the animation all together.*/
}

#bio p a:hover {
	color: #208cb1;
	text-decoration: underline;
	background: none;
}

#bio p a:active {color: #28b1e0;}

#bio p:last-child {
	margin-bottom: 0;
}

/*#bio*/ #headerimgXXXXXX { /*without bleed*/
	width: 600px;
	height: 139px;
	margin-bottom: 23px;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-bottom: 1px solid #c4c0c0;
	border-right: 1px solid #868484;

	background-image: url(../images/bio-600px_wide_goat.jpg);
}

#bio #headerimgXXXXXX { /*without bleed*/
	background: url(../images/bio-660px-wide-goat.jpg) no-repeat -41px -9px;
}




/*#bio*/ #headerimg { /*widescreen with bleed*/
	width: 660px;
	height: 139px;
	margin: auto -30px;
	margin-bottom: 23px;
	margin-bottom: 33px;

	/*border-bottom: 1px solid #c4c0c0;
	border-right: 1px solid #868484;*/

	background-image: url(../images/bio-600px_wide_goat.jpg);
	
	border-top: 1px solid #a89793;
	border-bottom: 1px solid #b9a6a2;
}

#bio #headerimg { /*widescreen with bleed*/
	background: url(../images/bio-660px-wide-goat.jpg) no-repeat 0px -9px;
}

#bio img.top {
	display: none;
	margin-bottom: 20px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;

	/*-webkit-border-bottom-left-radius: 0px;
	-webkit-border-bottom-right-radius: 0px;*/
	border-bottom: 1px solid #c4c0c0;
	border-right: 1px solid #868484;
}

#bio img.right {
	
	display: none;
	
	float: right;
	margin-left: 2em;
	margin-bottom: 2em;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}





/*#############################################
Links
#############################################*/


#links p {
	margin-bottom: 2em;
}

#links #headerimg {
	margin-bottom: 20px;
	background: url(../images/bio-660px-wide-goat_head.jpg) no-repeat 0 0;
}




#links .entry a {
	/*background-color: lightblue;*/
}

#links .entry {
	height: auto;
	/*padding-top: 15px;
	padding-bottom: 20px;
	margin-bottom: 5px;*/
	
	padding: 20px 0;
	margin: 0;
}

#links .entry.first {padding-top: 10px;}
#links .entry.last {padding-bottom: 0;}


#links .entry .infoblock {
	position: relative;
	left: 0px;
	top: 0px;
	/*background-color: lightgrey;*/
}


#links .entry .infoblock h3 { /*link*/
	position: relative;
	top: 1px;
	padding-bottom: 0px;
	font-size: 23px;
	font: 19px Helvetica, Arial, sans-serif;
	/*text-decoration: underline;*/
	text-transform: none;
	/*color: #475a5e;*/
	color: #262626;

	/*background-color: lightgoldenrodyellow;*/
	/*-webkit-transition: all 0.1s linear;*/
}

#links .entry .infoblock .description {
	position: relative;
	top: 1px;
	font-size: 14px;
	color: #676664; /*greyish*/
	color: #475A5E; /*.title bluish*/
	
	/*background-color: pink;*/
}



/*************************************************
- "Links" page specific styling of .entry shape.
- This code makes them Square.
**************************************************/

#links .entry {
	padding: 0px;
	margin: 0px;
}

#links .entry a {
	margin: 0px 0;
	padding: 10px 7px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0;
}








#links .entry a:hover .infoblock				{padding-left: 3px;}
#links .entry a:hover .infoblock h3				{font-weight: bold;}

#links .entry a:hover .infoblock h3,
#links .entry a:hover .infoblock .description	{color: black;}

#links .entry a:active .infoblock h3,
#links .entry a:active .infoblock h3 em,
#links .entry a:active .infoblock .description	{color: white;}













/*##############################################################
Fancybox (Resets to Fancybox defaults to undo the styling above
################################################################*/

a#fancybox-close { padding: 0; }
a#fancybox-close { background-color: transparent; }
a#fancybox-close:hover { background-color: transparent; }
a#fancybox-close:active { background-color: transparent; }