/* Emacs settings: -*- mode: Fundamental; tab-width: 4; -*-

////////////////////////////////////////////////////////////////////////////
//                                                                        //
// Andrew's Album Application: photos.css                                 //
//                                                                        //
// Copyright (c) 2004-2005, Andrew Birrell                                //
//                                                                        //
////////////////////////////////////////////////////////////////////////////

*/


/* ************ Global settings */

A:link			{color: #ffffff}
A:active		{color: #ff0000}
A:visited		{color: #ffffff}
A:hover			{color: #00ff00}

body			{
	margin: 0px;
	padding: 0px;
	color: #ffffff;
	background-color: #808080;
	font-family: arial,verdana,sans-serif;
	font-size: 12px;
	-webkit-text-size-adjust: none;
}
table			{
	border-spacing: 0px;
}
td				{
	padding: 0px;
}
img				{
	border-width: 0px;
	margin: 0px;
	padding: 0px;
}


/* ************ Button bars */

table.buttonBar			{
	width: 100%;
	background-color: #606060; /* was #666666 at opacity 1.0 */
	table-layout: fixed;  /* column layout decided by first row */
	position: absolute;
	z-index: 3;
	opacity: 0.8;
	filter: alpha(opacity=80);
}
#topStuff				{ /* top button bar */
	border-bottom: #cccccc 2px ridge;
	top: 0px;
}
#bottomStuff			{ /* bottom button bar, title and commentary */
	border-top: #cccccc 2px ridge;
	bottom: 0px;
}
td.btns					{ /* areas within button bars */
	padding: 4px;
	white-space: nowrap;
	font-size: 1.25em;
}
#parentBtns				{ /* buttons for going to parents, TL */
	padding-left: 8px;
	width: 50%;
	overflow: hidden;
	visibility: hidden;
	text-align: left;
}
#parentBtns a			{ /* make active area full width */
	display: block;
}
#navigationBtns			{ /* buttons for play, stop, etc., TR */
	padding-right: 8px;
	width: 50%;
	visibility: hidden;
	text-align: right;
}
#privBtns				{ /* buttons for edit, etc., BL */
	width: 20%;
	border-right: 1px solid;
	padding-left: 8px;
	visibility: hidden;
	text-align: left;
}
#title					{ /* title area, bottom center */
	XXXbackground-color: #bbbbbb;
	color: #000000;
	width: 60%;
	text-align: center;
	overflow: hidden;
}
#commentary, #uptitle 	{ /* commentary, and title beside up-button */
	font-size: 0.8em;
}
#commentary				{ /* F-stop, date, etc., BR */
	width: 20%;
	border-left: 1px solid;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-right: 8px;
	text-align: right;
}
span.disabled			{ /* disabled button */
	color: #bbbbbb;
}


/* ************ Main contents */

/* The contents are three DIVs with class "contents", each acting as
   a scrollable container.  The three are managed by the swiper machinery
   on touch screens; otherwise only one is used.  Each contains a scrollee
   (created dynamically), which is a DIV wrapped around the actual content.
   */
   
.contents 				{ /* the three swiper screens */
	position: absolute;
	z-index: 2;
	width: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	display: none;
}
#contents1				{ /* initial swiper.cur */
	display: block;
}
.contents img			{ /* alignment of icons and main photo */
	vertical-align: middle;
}
.mainphoto				{ /* main photograph scrollee */
	cursor: pointer;
}
.listing				{ /* folder listing scrollee */
	margin-top: 27px;     /* compensate for overlapping menu bar height */
	margin-bottom: 27px;
	margin-left: 5px;
}
td.mini					{ /* sub-folder icon */
	width: 100px;
	text-align: center;
}
td.miniTitle			{ /* sub-folder title */
	width: 220px;
	text-align: left;
	font-size: 1.25em;
}
img.mini				{ /* sub-folder-icon */
	margin: 2px;
}


/* ************ Layout for small screens, typically phones */

@media screen and (max-device-width: 640px) {
	#prevAndNext, #privBtns, #commentary	{ /* hide some details */
		display: none;
	}
	.mainphoto								{ /* black detailing */
		background-color: #000000;
	}
}


/* ************ Pop-up dialogs */

div.dlog				{
	position: absolute;
	z-index: 4;
	display: none;
	width: 600px;
	left: 0px;
	top: 0px;
	border: #cccccc 2px ridge;
	padding: 0px;
	background-color: #666666;
	opacity: 0.92; filter: alpha(opacity=92);
	text-align: left;
}

#editForm				{
	width: auto;
}
#reading				{
	width: 100px;
	padding: 6px;
	text-align: center;
}
#scaling				{
	width: auto;
	padding: 6px;
	text-align: center;
}
div.dlogHeader			{
	background-color: #bbbbbb;
	color: #000000;
	padding: 2px;
	padding-left: 8px;
	cursor: move;
}
div.dragging			{
	background-color: #dddddd;
	color: #000000;
	padding: 2px;
	padding-left: 8px;
	cursor: move;
}
div.dlogBody			{
	border-top: #cccccc 2px ridge;
	padding: 8px;
	}
div.dlogStatus			{
	position: absolute;
	display: none;
	margin-top: 40px;
	width: 100%;
	text-align: center;
}
input.close				{
	float: right;
}
td.formPrompt			{
	text-align: right;
	padding-right: 8px;
}
td.formInput			{
	text-align: left;
	color: #000000;
}
form					{
	margin: 0px;
}
#readingProgress		{
	background-color: #bbbbbb;
	margin-top: 0.75em;
	border: #bbbbbb 1px inset;
	text-align: left;
}
#readingWidget			{
	background-color: #00ff00;
	position: relative;
	border: #bbbbbb 1px outset;
	font-size: 0.5em;
}