/* CSS Document */

/* CSS * Joe Neff Photography - 'Go Joey!' * by Arvind Thyagarajan */
/* All graphics on http://www.joeneff.com/... copyright 2007, Joe Neff */
/* April 2007 */

/* =============================================================================== */
/*  general */
/* =============================================================================== */
* {
	padding: 		0;
	margin: 		0;
}

BODY, HTML {
	height: 100%;
}

body { 
	font: 			.7em Arial,Helvetica,Verdana,Tahoma,sans-serif; 
	text-align: 	left;
	}
a{
	text-decoration: none;
}


/* =============================================================================== */
/*  Menu Links */
/* =============================================================================== */

/* JOE */
#index #joe {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 290px;
	height: 210px;
}
#index #joe a {
	display: block;
	width: 290px;
	height: 210px;
	background: url(../images/joeneff.gif) 0px 0px no-repeat;
	cursor: pointer;
}
#index #joe a span {
	display: none;
}

/* JOE SELECTED */
#index #joe_sel {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 290px;
	height: 210px;
}
#index #joe_sel a {
	display: block;
	width: 290px;
	height: 210px;
	background: url(../images/joeneff_selected.gif) 0px 0px no-repeat;
	cursor: default;
}
#index #joe_sel a span {
	display: none;
}

/* PEOPLE */
#index #people {
	position: absolute;
	top: 205px;
	left: 75px;
	width: 150px;
	height: 50px;
}
#index #people a {
	display: block;
	width: 150px;
	height: 50px;
	background: url(../images/people.gif) 0px 0px no-repeat;
	cursor: pointer;
}
#index #people a:hover {
	background: url(../images/people_over.gif) 0px 0px no-repeat;
}
#index #people a span {
	display: none;
}

/* PEOPLE SELECTED */
#index #people_sel {
	position: absolute;
	top: 205px;
	left: 75px;
	width: 150px;
	height: 50px;
}
#index #people_sel a {
	display: block;
	width: 150px;
	height: 50px;
	background: url(../images/people_selected.gif) 0px 0px no-repeat;
	cursor: default;
}
#index #people_sel a span {
	display: none;
}

/* INDIA */
#index #india {
	position: absolute;
	top: 255px;
	left: 30px;
	width: 150px;
	height: 50px;
}
#index #india a {
	display: block;
	width: 150px;
	height: 50px;
	background: url(../images/india.gif) 0px 0px no-repeat;
	cursor: pointer;
}
#index #india a:hover {
	background: url(../images/india_over.gif) 0px 0px no-repeat;
}
#index #india a span {
	display: none;
}

/* INDIA SELECTED */
#index #india_sel {
	position: absolute;
	top: 255px;
	left: 30px;
	width: 150px;
	height: 50px;
}
#index #india_sel a {
	display: block;
	width: 150px;
	height: 50px;
	background: url(../images/india_selected.gif) 0px 0px no-repeat;
	cursor: default;
}
#index #india_sel a span {
	display: none;
}

/* SEWN */
#index #sewn {
	position: absolute;
	top: 285px;
	left: 45px;
	width: 150px;
	height: 50px;
}
#index #sewn a {
	display: block;
	width: 150px;
	height: 50px;
	background: url(../images/sewn.gif) 0px 0px no-repeat;
	cursor: pointer;
}
#index #sewn a:hover {
	background: url(../images/sewn_over.gif) 0px 0px no-repeat;
}
#index #sewn a span {
	display: none;
}

/* SEWN SELECTED */
#index #sewn_sel {
	position: absolute;
	top: 285px;
	left: 45px;
	width: 150px;
	height: 50px;
}
#index #sewn_sel a {
	display: block;
	width: 150px;
	height: 50px;
	background: url(../images/sewn_selected.gif) 0px 0px no-repeat;
	cursor: default;
}
#index #sewn_sel a span {
	display: none;
}

/* LANDSCAPE */
#index #landscape {
	position: absolute;
	top: 355px;
	left: 45px;
	width: 175px;
	height: 50px;
}
#index #landscape a {
	display: block;
	width: 175px;
	height: 50px;
	background: url(../images/landscape.gif) 0px 0px no-repeat;
	cursor: pointer;
}
#index #landscape a:hover {
	background: url(../images/landscape_over.gif) 0px 0px no-repeat;
}
#index #landscape a span {
	display: none;
}

/* LANDSCAPE SELECTED */
#index #landscape_sel {
	position: absolute;
	top: 355px;
	left: 45px;
	width: 175px;
	height: 50px;
}
#index #landscape_sel a {
	display: block;
	width: 175px;
	height: 50px;
	background: url(../images/landscape_selected.gif) 0px 0px no-repeat;
	cursor: default;
}
#index #landscape_sel a span {
	display: none;
}

/* INFO */
#index #info {
	position: absolute;
	top: 450px;
	left: 20px;
	width: 170px;
	height: 50px;
}
#index #info a {
	display: block;
	width: 170px;
	height: 50px;
	background: url(../images/info.gif) 0px 0px no-repeat;
	cursor: pointer;
}
#index #info a:hover {
	background: url(../images/info_over.gif) 0px 0px no-repeat;
}
#index #info a span {
	display: none;
}

/* INFO SELECTED */
#index #info_sel {
	position: absolute;
	top: 450px;
	left: 20px;
	width: 170px;
	height: 50px;
}
#index #info_sel a {
	display: block;
	width: 170px;
	height: 50px;
	background: url(../images/info_selected.gif) 0px 0px no-repeat;
	cursor: default;
}
#index #info_sel a span {
	display: none;
}


/* =============================================================================== */
/*  Thumbnail & Image Viewport DIVs */
/* =============================================================================== */

#index #home_image {
	position:absolute;
	top: 17px;
	left: 300px;
	width:600px;
	height:400px;
	margin: auto;
	padding:5px;
	border:0px solid #000000;
	text-align:center;
	vertical-align:middle;
	white-space:nowrap;
	overflow:hidden;
}

#index #image_viewport {
	position:absolute;
	top: 15px;
	left: 302px;
	width:600px;
	height:443px;
	margin: auto;
	padding:5px;
	border:0px solid #000000;
	text-align:center;
	vertical-align:middle;
	white-space:nowrap;
	overflow:hidden;
}

#index #thumbs {
	position:absolute;
	top: 490px;
	left: 300px;
	width:600px;
	height:104px;
	margin: auto;
	padding:5px;
	border:0px solid #d0d0d0;
	text-align:center;
	vertical-align:middle;
	white-space:nowrap;
	overflow-x: scroll;
	overflow-y:hidden;
}

#index #controller {
	position:absolute;
	top: 464px;
	left: 300px;
	width:600px;
	height:15px;
	margin: auto;
	padding:5px;
	border:0px solid #d4d4d4;
	background-color: transparent;
	text-align:center;
	vertical-align:middle;
	white-space:nowrap;
	overflow:hidden;
}

#index #prev {
	position: absolute;
	top: 470px;
	left: 550px;
	cursor: pointer;
}
#index #next {
	position: absolute;
	top: 470px;
	left: 620px;
	cursor: pointer;
}

#index #bio_image {
	position:absolute;
	top: 50px;
	left: 300px;
	width:600px;
	height:900px;
	margin: auto;
	padding:5px;
	border:0px solid #000000;
	text-align:center;
	vertical-align:middle;
	white-space:nowrap;
	overflow:hidden;
}