@CHARSET "ISO-8859-1";

/*
 * UpPhoto style sheet.
 * TODO: move all upphoto-related things here from bpm.css (refer to iconz.css as well, as it is newer)
 * Ronen Agranat 2008
 */

/*
 * Pseudo-table where photo's are displayed.
 * The photo 'outlay'
 */
.gallery {
	margin: 10px 0px 10px 70px;
}

/*
 * Div containing photo and caption for display
 */
.photo_cell {
	width: 175px;
	height: 175px;
	float: left;
	margin: 25px 5px 5px 10px;
}

/*
 * Caption below photo
 */
.photo_cell em {
	/*text-align: center;*/ /*this does work well but can't get img_wrapper to middle*/
	display: block;
	font-family: georgia;
	float: left;
	clear: left;
	width: 100%;
}

/*
 * Photo and drop-shadow effects
 */

/*
 * Wrap img in this to create a drop shadow
 */
.img-wrapper {
	background: url("resources/shadow.gif") no-repeat bottom right;
	/* causes div to shrink-wrap img */
	clear: both;
	float: left;
}

/*
 * The img within the wrapper is offset to reveal the drop shadow.
 */
.img-wrapper img {
	margin: -7px 7px 7px -7px;
	/* TODO modify database to maintain dimension info */
	/*width: 160px;
	height: 122px;*/
}

/*
 * Make the image look like a photo by adding a 'polaroid' border
 */
.img-wrapper img {
	background-color: #fff;
	border: 1px solid gray;
	padding: 5px;
}

/*
 * Kludges for IE
 */
 .img-wrapper {
 	position: relative;
 }
 
 .img-wrapper img {
 	position: relative;
 	display:block;
 }
 
 /*
  * Album titles in album overview. They link to the respective albums.
  */
 
.categoryTitle {
	font-family: verdana;
	font-size: 11pt;
	text-decoration: none;
	font-weight: 500;
	color: black;
}

.smallPhoto em {
	font-family: sans-serif;
	font-size: 9pt;
	text-decoration: none;
	color: black;
	display: block;
	
	/*text-align: center;*/
	
	clear: both;
}

/*
 * Non-semantic clearing div so floated elements occupy their parent container.
 */
.clear {
	clear: both;
}

/*
 * div containing page navigation buttons (prev. page, next page)
 */
.pageNav {
	/*width: 25em;*/
	width: 45em;
	margin: 0 auto;
	font: 16px garamond;
}

/*
 * 'Next page' and 'prev page' navigation arrows
 */
.pageArrow {
	margin:20px;
	width: 10em;
	float: left;
}
/*
 * So navigation arrows look like links
 */
.pageArrow:hover {
	cursor: hand; /*cursor*/
}

/*
 * a page nav. arrow button. left one.
 */
.pageArrow img {
	float: left;
	border: 0;
	margin: 3px 10px 3px 10px;
}
/*
 * id of right left page nav arrow button
 */
.pageArrow img#rightArrow {
	float: right;
}

/*
 * Page navigation arrow text
 */
.pageArrow p {
	/*clear: left;*/
	text-decoration: none;
	margin: 15px 14px;
}

/*
 * Experimenting w/ page nav numbers
 */
.pageNav strong {
	display: block;
	float: left;
	margin: 30px 0 0 0;
}

/*
 * Page navigation tabbed horizontal nav bar; done as list
 */
.pageNav ul {
	padding: 0; /* firefox indents list */
	margin-left: 5px; /* so does not actually sit on prev button in firefox */
	list-style: none;
	float: left;
}

/*
 * Page link in page nav bar. Responsible for right of 'sliding door' tab.
 */
.pageNav ul li {
	float: left;
	background: url(resources/tab-right.gif) no-repeat top right;
}

/*
 * Page nav link -- anchor. Responsible for appearance of tab and left of 'sliding door'.
 */
.pageNav li a {
	display: block;
	padding: 0 0.7em;
	line-height: 2.5em;
	background: url(resources/tab-left.gif) no-repeat top left;
	text-decoration: none;
	color: #fff;
	float: left;
}

/*
 * Hover for page nav tabs
 */
.pageNav ul li a:hover {
	color: orange;
}

/*
 * Div containing big photo: image and description.
 */
#bigPhoto {
	margin: 10px;
	padding: 10px;
}

/*
 * The actual img for the big photo
 */

img #photo_display {
	cursor: pointer;
}

/*
 * Photo caption in big photo view.
 */
#bigPhoto h3 {
	clear: both;
	font-family: garamond;
}

/*
 * A back button
 */
.backButton {
	display: block;
	background: url(resources/up25.jpg) no-repeat top left;
	width: 9em;
	line-height: 25px;
	text-indent: 28px;
	float: left;
	margin-right: 3px;
	margin-top: 11px;
	text-decoration: none;
}

/*
 * Next page button, for page navigation.
 */
.nextButton {
	display: block;
	background: url(resources/right.png) no-repeat center right; /* note: 'center', not 'middle' */
	width: 7em;
	line-height: 48px;
	float: right;
	text-decoration: none;
	text-weight: 600;
}

/*
 * Previous page button, for page navigation
 */
.prevButton {
	display: block;
	background: url(resources/left.png) no-repeat center left; /* note: 'center', not 'middle' */
	width: 8em;
	line-height: 48px;
	float: left;
	text-indent: 36px;
	text-decoration: none;
	text-weight: 600;
}

/*
 * Filler, to occupy space of a button that is not being shown
 * at the bottom. Note: enclose   for firefox, otherwise
 * firefox collapses div 
 */
.filler7em {
	width: 7em;
	line-height:48px;
	float: left;
}

/*
 * Fonts, colors and typography
 */
 
/*
 * Gallery header
 */
h2 {
	color: darkblue;
	font-style: underline;
	font-variant: small-caps;
	display: block;
	margin: 0 auto;
	text-align: center;
	text-decoration: underline;
}

/*
 * Subtitle
 */
h4 {
	font-style: italic;
	text-align: center;
	margin: 0 auto;
	color: darkorange;
	font-family: sans-serif;
	font-weight: normal;
}

/*
 * Navigation for the large image display
 */
.bigImageNav {
	width: 565px;
	/*margin-left: 5px;*/
}

#loading {
	background: url(resources/loading128.png) no-repeat top left;
	width: 128px;
	height: 128px;
	z-index: 1000000;
	/*position: absolute;
	top: 0;
	left: 0;*/
}