#photo {
	display:			table; /* Horisontal centering within #container when content is narrower than min-width. */
	text-align:			center;
/*	border:				1px solid yellow;*/
}


#photo > #framecontainer {
	display:			table-cell;
	vertical-align:		middle;
}


#photo #frame {
	position:			relative;
	display:			inline-block;
	margin:				0 auto;
	margin-bottom:		4%; /* Offset frame a little bit above middle. */
	background:			#fff;
	border:				0.8em solid #fff; /* We need a fixed width so we can compensate for it elsewhere. */
}

#photo #frame > h1 {
	display:			none;
}


#photo #frame > .caption {
	display:			table;
	color:				#222;
	padding-top:		0.5em; /* This is used for offset in positioning prev/next links. */
	padding-bottom:		0.0em; /* Already has enough "padding" from #frame border. */
	height:				3em;
	width:				100%;
	overflow:			hidden;
}

#photo #frame > .caption > strong {
	display:			table-cell;
	width:				100%;
	font-size:			100%;
	font-weight:		normal;
	text-align:			center;
	vertical-align:		middle;
	color:				#222;
	letter-spacing:		+0.05em;
}





#photo #nav {
}

#photo #nav > ul {
	display:			block;
	list-style-type:	none;
	margin:				0;
	padding:			0;
}	

#photo #nav > ul > li {
	display:			block;
	margin:				0;
	padding:			0;
}

#photo #nav > ul > li > a {
	display:			block;
	position:			absolute;
	margin:				0;
	padding:			0;
	background:			url("blank.png") no-repeat transparent; /* IE ignores hovering empty links areas, so we fill it with a blank image.*/
/*	outline:			1px dashed yellow;*/
}

/* The outer while border area of the button. */
#photo #nav > ul > li.up > a > span,
#photo #nav > ul > li.previous > a > span,
#photo #nav > ul > li.next > a > span {
	display:			block;
	position:			absolute;
	background:			#fff;
	visibility:			hidden;
/*	outline:			1px dashed yellow;*/
}

#photo #nav > ul > li.up > a:hover > span,
#photo #nav > ul > li.previous > a:hover > span,
#photo #nav > ul > li.next > a:hover > span {
	visibility:			visible;
}

/* The inner icon area of the button */
#photo #nav > ul > li > a > span > span {
	display:			block;
	position:			relative;
	margin:				0;
	padding:			0;
/*	outline:			1px dashed red;*/

	color:				transparent;	/* Disable display of link text; we only want to display the image. */
	font-size:			0;				/* What he said ^. */

	background:			url("sprites.png") no-repeat transparent;
}


/* Link hover 3D press effect.
#photo #nav > ul > li > a > span:hover > span {
	position:			relative;
	right:				-1px;
	top:				-1px;
}
*/

/* The entire surrounding link area. */
#photo #nav > ul > li.up > a {
	top:				0px;
	right:				0px;
	width:				30%;
	height:				15%;
/*	max-height:			60px; /* If it gets too tall, it will get in our way. */
/*	outline:			2px solid red;*/
}

#photo #nav > ul > li.up > a > span {
	top:				0px;
	right:				0px;
	padding:			14px; /* 14px pad + 11px content width + 14px pad = 39px width total, match this in other li. */
}

#photo #nav > ul > li.up > a > span > span {
	height:				11px;
	width:				11px;
	background-position: -0px -50px;
}

#photo #nav > ul > li.up > a:hover > span > span {
	background-position: -22px -50px;
}

#photo #nav > ul > li.up > a > span:hover > span {
	background-position: -11px -50px;
}



/* The entire surrounding link area. */
#photo #nav > ul > li.previous > a {
	bottom:				3.5em; /* Height of .caption incl. its top padding. */
	left:				0px;
	width:				30%;
	height:				75%; /* Image height - li.up  */
/*	outline:			1px solid blue;*/
}

#photo #nav > ul > li.previous > a > span {
	left:				0px;
	bottom:				40%;
	padding:			14px 14px 14px 10px; /* 39px in total (li.up) - 15px content width = 24px left = 14px + 10px pad */
}

#photo #nav > ul > li.previous > a > span > span {
	height:				58px;
	width:				15px;
	background-position: -0px -358px;
}

#photo #nav > ul > li.previous > a:hover > span > span {
	background-position: -30px -358px;
}

#photo #nav > ul > li.previous > a > span:hover > span {
	background-position: -15px -358px;
}



/* The entire surrounding link area. */
#photo #nav > ul > li.next > a {
	bottom:				3.5em; /* Height of .caption incl. its top padding. */
	right:				0px;
	width:				30%;
	height:				75%; /* Image height - li.up  */
/*	outline:			1px solid green;*/
}

#photo #nav > ul > li.next > a > span {
	right:				0px;
	bottom:				40%;
	padding:			14px 10px 14px 14px; /* 39px in total (li.up) - 15px content width = 24px left = 14px + 10px pad */
}

#photo #nav > ul > li.next > a > span > span {
	height:				58px;
	width:				15px;
	background-position: -0px -300px;
}

#photo #nav > ul > li.next > a:hover > span > span {
	background-position: -30px -300px;
}

#photo #nav > ul > li.next > a > span:hover > span {
	background-position: -15px -300px;
}



#photo #nav > ul > li.story,
#photo #nav > ul > li.comments,
#photo #nav > ul > li.rate {
	display:			none;
}



#photo #nav > ul > li.story > a,
#photo #nav > ul > li.comments > a {
	position:			absolute;
	display:			block;
	bottom:				0;
	padding:			0;
/*	background:			#5599ff;*/
/*	outline:			1px solid black;*/
}

#photo #nav > ul > li.story > a > span,
#photo #nav > ul > li.comments > a > span {
	display:			block;
	padding:			3px; /* Expand icons hover highlight area. */
	margin:				0px;
/*	outline:			1px solid blue;*/
}

#photo #nav > ul > li.story > a > span > span,
#photo #nav > ul > li.comments > a > span > span {
	display:			block;
	height:				11px;
	width:				11px;
/*	outline:			1px solid red;*/
}


#photo #nav > ul > li.story > a {
	right:				20px;
}

#photo #nav > ul > li.story > a > span > span {
	background-position: -22px -72px;
}

#photo #nav > ul > li.story > a > span:hover > span {
	background-position: -11px -72px;
}



#photo #nav > ul > li.comments > a {
	right:				0px;
}

#photo #nav > ul > li.comments > a > span > span {
	background-position: -22px -61px;
}

#photo #nav > ul > li.comments.empty > a > span > span {
	background-position: -0px -61px;
}

#photo #nav > ul > li.comments > a > span:hover > span {
	background-position: -11px -61px;
}





#photo #nav > ul > li.rate > a {
	bottom:				0px;
	left:				0px;
/*
	outline:			1px solid red;
	background:			yellow;
*/
}

#photo #nav > ul > li.rate > a > span {
	padding:			0px;
	margin:				0px;
	color:				cyan;
/*	height:				30px;
	width:				30px;*/
}

#photo #nav > ul > li.rate > a > span > span {
	height:				11px;
	width:				11px;
}

#photo #nav > ul > li.rate > a.like > span > span {
	background-position: -0px -82px;
}

#photo #nav > ul > li.rate > a.like:hover > span > span {
	background-position: -11px -82px;
}

#photo #nav > ul > li.rate > a.dislike > span > span {
	background-position: -0px -94px;
}

#photo #nav > ul > li.rate > a.dislike:hover > span > span {
	background-position: -11px -94px;
}


#photo #nav > ul > li.rate > a.unlike > span > span {
	background:			yellow;
}




/* Icon index panel */
#photo #nav > ul > li.index {
	overflow:			auto;
/*	overflow-x:			scroll;
	overflow-y:			hidden;*/
	padding:			0;
	margin:				0;
	background:			#666;
	text-align:			center;

	display:			block;
	position:			fixed;
/*	bottom:				0;*/
	left:				20%; /* Using % temporarily to control centering. */
	width:				60%; /* Using % temporarily to control centering. */
}

#photo #nav > ul > li.index > ul {
	display:			block;
	list-style-type:	none;
	padding:			0;
	margin:				10px;
	border:				none;
	white-space:		nowrap;
}

#photo #nav > ul > li.index > ul > li.previous,
#photo #nav > ul > li.index > ul > li.next {
	display:			none;
	margin:				0;
	padding:			0;
	vertical-align:		middle;
	text-align:			center;
}


#photo #nav > ul > li.index > ul > li.thumbnail {
	display:			inline-block; /* OR: table-cell */
	margin:				5px 10px;
	padding:			0;
	vertical-align:		middle;
	text-align:			center;
	border-top:			2px solid #fff;
	border-right:		2px solid #fff;
	border-left:		2px solid #fff;
	border-bottom:		8px solid #fff;
}

#photo #nav > ul > li.index > ul > li.current {
	margin:				5px 25px;
	border-color:		#fff;
	opacity:			0.5;
}


#photo #nav > ul > li.index > ul > li.thumbnail:hover {
	position:			relative;
	top:				-2px;
	left:				0px;
	border-color:		#fff;
}


#photo #nav > ul > li.index > ul > li.thumbnail > a {
	display:			block;
	padding:			0;
	margin:				0;
	text-decoration:	none;
}

#photo #nav > ul > li.index > ul > li.thumbnail > a > img,
#photo #nav > ul > li.index > ul > li.thumbnail > img {
	display:			block;
	margin:				0;
	padding:			0;
	outline:			none;
	border:				none;
}


/*#photo #nav > ul > li.index > ul > li.thumbnail > a > img:hover,
#photo #nav > ul > li.index > ul > li.thumbnail > img:hover {
	opacity:			0.75;
}*/





/* Align notes with center of top edge of #frame. */
#photo #notes {
	position:			absolute;
	top:				0;
	right:				50%;
}


#photo #notes > div {
	display:			block;
	position:			absolute;
	padding:			5px 3px 5px 5px;
	background:			#ed7;
	border-top:			1px solid #222;
	border-left:		1px solid #222;
	color:				#222;
}

#photo #notes > div.story {
	top:				-20px;
	right:				30px;
}

#photo #notes > div.comments {
	top:				-20px;
	left:				30px;
}


#photo #notes > div > div.header {
	padding:			0;
	margin:				0;
}

#photo #notes > div > div.header > h3 {
	display:			inline-block;
	padding-bottom:		10px;
	margin:				0;
	font-size:			large;
	font-weight:		bold;
}

#photo #notes > div > div.header > h3 > span {
	font-size:			small;
	vertical-align:		0.2em;
}
#photo #notes > div > div.header > h3 > span:before {
	content:			" ";
}

#photo #notes > div > div.header > a.close {
	display:			inline-block;
	float:				right;
	margin:				0px;
	padding:			3px;
	border:				1px solid #222;
}

#photo #notes > div > div.header > a.close > span {
	display:			block;
	padding:			0;

	color:				transparent;	/* Disable display of link text; we only want to display the image. */
	font-size:			0;				/* Ditto. */

	background:			url("sprites.png") no-repeat transparent;
	background-position:-14px 0px;
	width:				7px;
	height:				7px;
}

#photo #notes > div > div.header > a.close:hover {
	border:				1px solid #c44;
}

#photo #notes > div > div.header > a.close:hover > span {
	color:				#c44;
	background-position:-7px -0px;
}


#photo #notes > div > div.content {
	overflow:			auto;
	padding:			4px 4px 7px 0px;
}


#photo #notes > div.story > div.content {
	height:				200px;
	width:				450px; /* Width + #story right offset must not exceed 500px; half max allowed width. */
}

#photo #notes > div.comments,
#photo #notes > div.story {
	display:			none;
}

#photo #notes > div.comments > div.content {
	height:				400px; /* No more that .. is it 500? */
	width:				450px; /* Width + #story right offset must not exceed 500px; half max allowed width. */
}



#photo #notes > div.comments > div.content > dl,
#photo #notes > div.comments > div.content > dl > dt,
#photo #notes > div.comments > div.content > dl > dd {
	padding:			0;
	margin:				0;
}

#photo #notes > div.comments > div.content > dl > dd + dt {
	padding-top:		0.5em;
	margin-top:			0.5em;
	border-top:			1px solid #222;
}

#photo #notes > div.comments > div.content > dl > dt {
	background:			red;
}

#photo #notes > div.comments > div.content > dl > dt > span.author {
	font-size:			large;
	background:			yellow;
}

#photo #notes > div.comments > div.content > dl > dt > span.avatar {
	background:			yellow;
}
#photo #notes > div.comments > div.content > dl > dt > span.avatar > img {
	float:				left;
	background:			yellow;
	border:				none;
	padding:			0;
	margin:				0;
}

#photo #notes > div.comments > div.content > dl > dt > span.number {
	float:				right;
	font-size:			small;
	background:			yellow;
}
#photo #notes > div.comments > div.content > dl > dt > span.number:before {
	content:			"#";
}

#photo #notes > div.comments > div.content > dl > dt > span.time {
	font-size:			small;
	background:			yellow;
}

#photo #notes > div.comments > div.content > dl > dd {
	background:			green;
}



#photo #notes > div > div.content p {
	margin:				0;
	padding:			0;
}

#photo #notes > div > div.content p + p {
	margin-top:			0.7em;
}

#photo #notes > div > div.content p > a {
	color:				#c44;
}

#photo #notes > div > div.header      > p > a:hover,
#photo #notes > div > div.content     > p > a:hover,
#photo #notes > div > div.add-comment > p > a:hover
{
/*	color:				#c44;*/
	text-decoration:	underline;
}



.oneup {
	background:			url("1up.gid") no-repeat transparent;
	display:			block;
	position:			absolute;
	bottom:				30px;
	left:				30px;
	border:				1px solid yellow;
}