/*
 * $Id: album.css,v 1.12.2.4 2010/05/25 17:15:37 ord Exp $
 */

/* @import "/photos/css/test.css"; */

body {
	font-family: Arial, helvitica, sans-serif;
	font-size: 10pt;
	padding: 0% 5% 0% 5%;
}

/******************
 * General Styles *
 ******************/
img {
	border: none;
}

a {
	color: #0e00c6;
	color: #00488C;
}

a.markup_external_link {
	border-bottom: #00488C 1px dotted;
	text-decoration: none;
}

a:hover {
	color: #466a8c;
}

/*
a:visited {
	font-style: italic;
}
*/

img#nav_next,
img#nav_prev,
img.greyscale
{
/*
	width: 15px;
	height: 15px;
*/
}

img.icon {
	background-color: #888;
	background-image: url('../images/clearbits/bg_rounded.gif');
	/* background-image: url('../images/sanscon/bg_blank.gif'); */
}

img.icon:hover {
	background-color: #987;
}

div.icon-links {
	text-align: left;
}

/**************
 * Navigation *
 **************/
div#nav {
	background-color: #ccc;
	border-top: #ddd 2px solid;
	border-right: #bbb 2px solid;
	border-left: #ddd 2px solid;
	border-bottom: #bbb 2px solid;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: bold;
	/* width: 100%; */
	height: 2em;
}

div#nav-res {
	float: right;
}

div#nav-text {
	float: left;
}

/*
div#nav-res input {
	font-size: 8pt;
}
*/

/****************************
 * Main structural elements *
 ****************************/
/* Entire page */
div#main {
	position: relative;
}

/* Area between navigational header and footer */
div#content {
	position: relative;
	clear: both;
	/* float: left; cause content div to bunch up in IE
	 *              when there is no width specified.
	 *              This is true on the photos page in anycase.
	 * This fixes the margin-left: / padding-left: problem.
	 * Avoid floating!
	 */
	/* float: left; */

	/* Center content pane better */
	/* Don't try to use this with float: left */
	/* margin-left: 0em; */ /* Use padding instead */
	padding-left: 1em;

	/* Space at the bottom of content without requiring br */
	padding-bottom: 1em;
}

/* Override for the cover page */
body#cover div#content {
	text-align: center;
	float: none;
}

/* Photos (polariod) area */
div#photos {
	position: relative;
	display: block;
	float: left;
	clear: both;
}

div.photo {
	position: relative;
	float: left;
	display: inline;

	background: #e9e9e9;
	border: 1px solid #bcbcbc;

	text-align: center;
}

/* Position icon navigation links over thumbnails. */
div.icon-links 
{
	position: absolute;
	z-index: 100;
	background-color: #fff;
	top: 4px;
	left: 4px;
	padding-top:   4px;
	padding-left:  4px;
	padding-right: 4px;
}

div.photo img.photo-thumbnail
{
	position: relative;
}

/* Set the height and width only on the old pages.
 * On javascript pages we want tiny pictures
 */
body#page div.photo {
	/* height: 240px; */
	/* Changed from 270 to 280 for icons */
	min-height: 280px; /* !IE. IE version in css/ie.css */
	width:  240px;
	padding: 3px;
	margin:  2px;
}

/* Size photos on the slideshow page */
body#photo-page div.photo {
	min-height: 44px;
	width:  41px;
	padding: 2px;
	margin:  1px;
}

/* Input box for copy tag */
input.copytag {
	width: 100%;
}

/*******************************************/
/* These are the javascript page elements */

/* Center the main photo */
body#photo-page div#main-photo {
	text-align: center;
}

div#page-links-top {
	/* Give some spacing between synopsis and photos */
	padding-top: 1em;
	padding-bottom: 1em;
}
div#page-links-bottom {
	position: relative;
	display: block;
	/* float: left; */ /* this causes issues in IE */
	clear: both;
}

div#footer
{
	position: relative;
	/* float: left; */
	display: block;
	clear: both;

	text-align: center;
	margin-top: 10px;
	width: 100%;

	/* This works for IE, but not FF */
	/* But it does if we don't float. If so, we need padding at the top. */
	border-top: 1px solid #000;
	/* TO-DO: This doesn't actually do what we think.
	 * And the value actually isn't valid
	 */
	/* border-top-width: 50%; */

	float: none;
	/* Introduction of float: none moves the footer.
	 * This offset puts it it the same place as older
	 * versions.
	 *
	 * It however causes problems on the photos page!
	 */
	/* margin-top: 27px; */
}

div#footer img {
	border: none;
}

/*********
 * Album *
 *********/

div#album_mngmt {
	clear: both;
	display: block;
	float: left;
	background-color: #eee;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 5px;

	border-top: #ddd 2px solid;
	border-right: #bbb 2px solid;
	border-left: #ddd 2px solid;
	border-bottom: #bbb 2px solid;
}

textarea#description {
	width: 80%;
	height: 10em;
}

ul#albums_list,
ul#pages_list
{
	/* This must have float: none whent div#content is float: none,
	 * otherwise #content won't have to same/larger height than this.
	 *
	 * Actually, even with this it's not the case in FF.
	 * Actually, it is when there is something else after the list.
	 */
	float: none; 
}

ul#albums_list li,
ul#pages_list li
{
	position: relative;
	display: inline;
	float: left;

	width: 140px; /* Make title wrap */
	height: 200px;
	background-color: #e9e9e9;
	border: 1px solid #bcbcbc;
	padding: 1px;
	margin: 1px;
	text-align: center;
	list-style: none;
}

ul#albums_list li.album div.title,
ul#pages_list li.page div.title {
	height: 2.5em;
}

ul#albums_list li.album div.image,
ul#pages_list li.page div.image {
}

ul#albums_list li.album div.date,
ul#pages_list li.page div.date {
}

/********
 * Page *
 ********/

/* Old style pages are body#page. New (js) are body#photo-page */
body#page h1,
body#photo h1,
body#photo-page h1 {
	margin-bottom: -0.5em;
}

body#page h2,
body#photo h2,
body#photo-page h2 {
}

body#page h3,
body#photo h3,
body#photo-page h3 {
	margin-bottom: -0.1em;
}

body#page div.tags {
	font-size: 8pt;
}

/* Give the photos group padding / center */
/* TO-DO:
 * padding-left: only works in Firefox 1.0.7
 *                Does not work in Firefox 1.5.0.7 (remains left aligned)
 *                Unreliable in IE 6.0.2900.2180 (right aligns at full screen)
 * margin-left: works in Firefox 1.0.7 and 1.5.0.7
 *                Does not work in IE 6.0.2900.2180 (extends content point by
 *                10%! Width helps, but left has more padding than right.
 */
body#page div#photos {
	/* padding-left: 10%; */
	/*margin-left: 10%; */
	/* width: 79%; */
}

/* for edit */
textarea#edit_synopsis {
	width: 100%;
	height: 10em;
}

textarea.long_desc {
	font-size: 8pt;
	display: block;
	clear: both;
	width: 100%;
}

div.input-item label {
	font-weight: bold;
	width: 130px;
	display: inline;
	float: left;
	clear: both;
}

div.input-item input,
div.input-item select {
	width: 300px;
	margin-top: 0.1em;
	margin-bottom: 0.1em;
}

div.input-item-photo input,
div.input-item-photo select
 {
	font-size: 8pt;
}

div.input-item-photo label {
	font-size: 8pt;
	text-align: left;
	display: inline;
	float: left;
	width: 70px;
}

div.input-item-photo input {
	clear: right;
}

div#processing-messages {
	display: block;
	background-color: #e9e9e9;
	border: 1px solid #bcbcbc;
	padding: 1px;
	margin: 1px;
	margin-top: 2em;
	clear: both;
}


/* START development side by size slideshow

body#photo-page div#main-photo
{
	border: 1px solid #eee;
	position: relative;
	display: inline;
	float: left;
}

body#photo-page div#thumbnails {
	float: left;
	display: inline;
	position: relative;
	max-height: 400px;
	width: 210px;
	border: 1px solid #888;
	padding: 5px;
	margin-left: 50px;
	overflow: scroll;
	overflow: none;
}

body#photo-page div.photo {
	background-color: #fff;
	border: none;
}

END developmental side by side slideshow */

/*********
 * Photo * Page of a single photo (the popup)
 *********/
/* Styles for photo page (body#photo).
 *
 * There are two different photo pages, the first one is the popup window,
 * and the second is the same thing, within the main browser window. These
 * are distinguished by class name.
 *
 * body.photo-popup  - single photo, popup page
 * body.photo-single - single photo, main page
 */

/*
 * On the photos page, center the photo
 */
body#photo div#photo-box {
	text-align: center;
}

/*
 * Give the photo a shadow.
 */
body#photo div#photo-box img {
	border-right: solid 3px #bbb;
	border-bottom: solid 3px #bbb;
}

body#photo.photo-single div#photo-nav {
	text-align: center;
}

body#photo.photo-popup div#photo-nav {
}

/*
 * Set styles specific for popup photo
 * These are pretty much to make the popup window look as per it did in the
 * original version.
 * Note the new div#main and div#content (makes xhtml more consistant with all
 * other pages) add some extra space at the top.
 */
/* Remove the padding on popup */
body#photo.photo-popup {
	padding: 0% 0% 0% 0%;
}

body#photo.photo-popup h1 {
	margin-bottom: -0.5em;
	font-size: 12pt;
}

body#photo.photo-popup h2 {
	font-size: 10pt;
	margin-top: 0.5em;
	margin-bottom: -0.5em;
}

body#photo.photo-popup h3 {
	margin-bottom: -0.1em;
	font-size: 9pt;
}

body#photo.photo-popup div#content {
	margin: 0% 0% 0% 0%;
}


/* Testing */
/*
div#main {
	border: 1px solid;
	border-color: blue;
}

div#content {
	border: 1px solid;
	border-color: red;
}

div#photos {
	border: 1px solid;
	border-color: green;
	
}

div#footer {
	border: 1px solid;
	border-color: purple;
}
*/

/* Further testing. Entries here are testing, to not disrupt entries
 *  above.
 */

div#photo-parent,
div#metadata 
{
	float: left;
	position: relative;
	display: inline;
}

div#photo-box
{
	/* Setting a width stops page from moving around when image is loading. */
	/* width: 480px; */
	/* Note, we do it in the XSL as inline to get the right res */
}

div#metadata
{
	padding-left: 10px;
	/* width: 40%; */
}

td {
	font-size: 8pt;
	padding: 0px;
	font-family: "Helvetica", sans-serif;
	margin: 0px;
	vertical-align: top;
}