/* @override 
	http://localhost:8888/nicolayeoman/css/screen.css
	http://dev.nicolayeoman.com/css/screen.css
*/

/* The Malarkey Method: MIR Image replacement Technique*/
.mir { letter-spacing : -1000em;  }
/* Be nice to Opera, but hide from MacIE.*/
/*\*/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;}
/* end hack */

html {
	text-align: center;
}

body {
	text-align: left;
	font: 11px/22px Helvetica, Arial, Geneva, sans-serif;
	line-height: 1em;
	color: #b2b2b2;
	background-color: #fff;
}

#outer_container {
	position: relative;	
	width: 842px;
	/* use margin instead of 'top' so shadowbox overlay fills screen correctly in IE8 */
	margin: 80px auto 0 auto;
}

a:link {
	color: #b2b2b2;
	text-decoration: none;
}

a:visited {
	color: #cdcdcd;
	text-decoration: none;
}

a:hover {
	color: #626262;
	text-decoration: none;
}

#intro {
	position: absolute;
	background: url(../images/site/NY_intro.gif) no-repeat 0 0;
	width: 842px;
	height: 31px;
	top: 260px;
	cursor: pointer;
}

#main_image {
	position: absolute;
	left: 0;
	top: 80px;
}

#main_image .img_container {
	width: 600px;
	height: 425px;
	background-image: url(../images/site/diagonal_tile.gif);
	overflow: hidden;
}

#main_image .img_container img {
	max-height: 425px;
	max-width: 600px;
	cursor: pointer;	
}

#brandingcontainer {
	position: absolute;
	top: 0;
	width: 208px;
	height: 34px;
	background: url(../images/site/NY_logo.gif) no-repeat 0 0;
}

#branding a {
	width: 208px;
	height: 34px;
	display: block;
}

/* 18px (Safari only needs 17, firefox needs 18 to prevent wrapping?) (664px + 18px) added to the width of the thumbs container so the thumbs don't wrap to another line */
.thumbscontainer {
	position: absolute;
	top: 80px;
	right: -12px;
	height: 425px;
	width: 219px;
	background: url(../images/site/thumbs_grid.gif) no-repeat 0 0;
}

.thumbs ul li {
	display: block;
	width: 60px;
	height: 60px;
	float: left;
	margin: 0 13px 13px 0;
}

.thumbs ul li img {
	width: 60px;
	height: 60px;
}

#main_nav {
	position: absolute;
	top: 23px;
	right: 0;
}

#main_nav ul {
	text-align: right;
	text-transform: uppercase;
	letter-spacing: 2px;
	line-height: 1em;
	font-size: 90%;
}

#main_nav li {
	display: inline;
	padding: 0 0 0 15px;
}

body#portfolio .nav_portfolio,
body#contact .nav_contact,
body#clients .nav_clients {
	color: #626262;
}

#image_nav {
	position: absolute;
	top: 530px;
	width: 600px ;
}

#image_nav p {
	letter-spacing: 1px;
}

p#image_nav_links {
	float: left;
	margin: 0 0 0 10px;
}

p#image_nav_links a {
	margin-left: 4px;
}

p#image_nav_links a.activeSlide {
	color: #626262;
}

/* the <span> is added by hacking the core.paginate.php file then set to display:none so the '<' and '>' can be hidden */
#image_nav_links span { display: none; }

/* the <strong> tag is generated by EE - styled here to show current page feedback */
#image_nav_links strong { color: #626262; margin-left: 2px; }

#publication {
	color: #626262;
	float: left;
}

#photographer {
	margin: 18px 0 0 0;
}

#tooltip {
	position: absolute;
	right: 0;
	top: 0;
	color: #cdcdcd;
}


/* CONTACT
---------------------------------------------------------------------------------- */

#contact_container {
	position: absolute;
	left: 0;
	top: 190px;
}

#contact_container p {
	line-height: 1.9em;
	letter-spacing: 0.2em;
	color: #b2b2b2;
}

#contact_container p a:link {
	color: #b2b2b2;
}

#contact_container p a:hover {
	color: #626262;
}

#contact_container span {
	color: #626262;
	margin: 0 5px 0 0;
}

/* CLIENTS
---------------------------------------------------------------------------------- */

#clients_container {
	position: absolute;
	left: 0;
	top: 80px;
	width: 600px;
	line-height: 1.9em;
}



#clients_container h3 {
	text-transform: uppercase;
	letter-spacing: 3px;
	line-height: 1em;
	color: #626262;
	margin: 0 0 10px 0;
}

#clients_container p {
	margin: 0 0 35px 0;
	font-size: 110%;
	text-align: left;
}


.thumbs ul li a.selected {
	opacity: 1.0;
	display: block;
	height: 56px;
	width: 56px;
	border: 1px solid red;
}

#navigation a * {
  display: none;
}

#navigation a,
#navigation a .hover {
  height: 70px;
  position: relative;
  display: block;
  background: url(../images/site/thumb.gif) 0 0 no-repeat;
}

#navigation a.home {
  background-position: 0 0;
  width: 102px;
}

/* .highlight will be remove if JS is enabled */
#navigation .highlight a.home:hover, 
#navigation a.home .hover {
  background-position: 0 -280px;
  width: 102px;
}


.tooltip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100000;
	display: none;
}

style {
	background: url(../images/site/enlarge.png) no-repeat 0 0;
}