@charset "utf-8";
/* CSS Document: master stylesheet for John Lloyd: Archive web site.
   Developed Jan-Apr 2010 by Adam Lloyd / SDS Belize.
   http://www.sds-belize.com/
 */
 
html { height: 100%; }

/* Original grey = #555. We are trying a lighter version. */
body {
	background-color: #eee;
	color: #777;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 10pt;
	margin: 0px;
	padding: 0px;
	height: 100%;
	text-align: center;
}

#wrapper {
	position: relative;
	margin: 0px auto;
	width: 1024px;
	height: 100%;
	text-align: left;
	background-color: #FFF;
}

div.titlebar {
	padding-top: 10px;
	padding-left: 15px;
	text-align: left;
	padding-bottom: 0px;
	/*font-size: 18pt; */
	font-size: 16pt;
	position: absolute;
	height: 90px;
	width: 225px;
	top: 0px;
	left: 0px;
	background-color: white;
}

/* The title bar link is NOT underlined by default. */
div.titlebar a {
	text-decoration: none;
}

/* It is, however, underlined when hovered on... */
div.titlebar a:hover {
		color: #F60;
		text-decoration: underline;
}

/* Main container: spans the whole page and sits below the top navigation bar. */
div.maincontainer {
	position: absolute;
	background-color: #FFF;
	left: 0px;
	top: 150px;
	width: 1024px;
}

/* Column for left subsection navigation - client names - in the Lloyd Northover section. */
div.mc_leftsub {
	position: relative;
	padding-left: 0px;
	float: left;
	width: 167px;
	font-size: 9pt;
	font-style: italic;
	overflow: hidden;
	margin-bottom: 3em;
}

/* Column for left "super" subsection navigation: equates to Identity, Ephemera, Posters
   in the Lloyd Northover section.  Was formerly 70 pixels (with mc_leftsub 10 pixels bigger) */
div.mc_leftsuper {
	position: relative;
	padding-left: 15px;
	float: left;
	width: 73px;
	font-size: 10pt;
	overflow: hidden;
	font-style: normal;
}

/* Left navigation panel, used in all sections OTHER than Lloyd Northover. (LN is the
   only section that requires two columns for navigation purposes. */
div.mc_leftnav {
	position: relative;
	padding-left: 15px;
	float: left;
	width: 240px;
	font-size: 10pt;
	font-style: italic;
}

/* The main section: this is the central pane in which identities, posters, articles and so
   on are displayed. */
div.mc_mainsection {
	position: relative;
	float: left;
	width: 510px;
	font-size: 16pt; 
	font-style: italic;
}

/* The right hand column, in captions (for marks, etc.) and illustrative images (in reflections)
   are displayed. */
div.mc_rightcaption {
	position: relative;
	float: left;
	width: /*244px*/ 240px;
	padding-right: 15px;
	font-size: 10pt;
	font-style: italic;
}

/* Three divisions to handle positioning of top-element navigation links. */
div.toplinks_leftblock {
	padding-top: 10px;
	padding-left: 15px;
	text-align: left;
	padding-bottom: 0px;
	font-size: 10pt;
	position: absolute;
	height: 90px;
	width: 170px;
	top: 0px;
	left: 240px;
	background-color: white;
}

div.toplinks_center {
	padding-top: 10px;
	padding-left: 10px;
	text-align: left;
	padding-bottom: 0px;
	font-size: 10pt;
	position: absolute;
	height: 90px;
	width: 170px;
	top: 0px;
	left: 420px;
	background-color: white;
}

div.toplinks_rightblock {
	padding-top: 10px;
	padding-left: 10px;
	text-align: left;
	padding-bottom: 0px;
	font-size: 10pt;
	position: absolute;
	height: 90px;
	width: 170px;
	top: 0px;
	left: 595px;
	background-color: white;
}

div.toplinks_share {
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 0px;
	text-align: left;
	position: absolute;
	height: 90px;
	width: 150px;
	left: 756px;
	top: 0px;
}

div.share_pin {
	padding-top: 10px;
}


/* The division in which the image navigator sits. This was formerly above the images
   themselves; now found above the caption instead. */
div.imgnav {
	position: absolute;
	top: -20px;
	left: 0px;
	width: 480px; /* this must synchronise with the width used for images */
	height: 15px;
	text-align: right;
	font-style: normal;
	font-size: 10pt;
	z-index: 5;
	/* Various ways of ensuring 75% opacity, across many browsers. */
	filter:alpha(opacity=75);
	-moz-opacity:0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
}

/* A revision of the imgnav class, based on shifting it to above the caption. */
div.imgnav2 {
	position: absolute;
	top: -20px;
	left: 0px;
	width: 244px; 
	height: 15px;
	text-align: left;
	font-style: normal;
	font-size: 10pt;
	z-index: 5;
	filter:alpha(opacity=75);
	-moz-opacity:0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
}


/* The caption title is in bold. */
div.mc_rightcaption .captiontitle {
	font-weight: bold;
}

/* All standard text is range left. */
p {
	text-align: left;
	margin-top: 0px;
	margin-bottom: 10px;
}

/* Used for flagging bits that we want to be orange. */
.orange {
	color: #F60;	
}

/* Standard links are the same colour as our text, and undecorated. They do, however,
   become underlined when pointed at with the mouse. */
a {
	color: #777;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* Link images (primarily for the image navigator) have no borders. This may or may
   not apply to the painting navigator. There will be a separate CSS rule for that.*/
div.imgnav a img {
	border-style: none;	
}

img {
	border-style: none;
}

div.mc_mainsection img {
	border-style: none;
}

div.mc_mainsection img.photo {
	border-style: none;
}

div.mc_mainsection img.logo {
	border-style: solid;
	border-width: 1px;
	border-color: #ddd; /* was #999, then #ccc */
}

div.mc_mainsection img.painting {
	border-style: none;
}


/* Links of class "currentpage" must be orange, in addition to standard formatting. */
a.currentpage {
	color: #f60;	
}

/* Disabled: generally a bit paler on the text. */
span.disabled {
	color: #ccc;
}

div.profile_heading {
	margin-top: 0px;
	margin-bottom: 12px;
	padding: 0px;
	font-weight: bold;
}

/* insert a rule for the first profile_heading in mc_mainsection, so
we can set the main profile_heading div to have a top_margin of 24px - 
the rule for the first instance should have a top margin of 0px */

div.profile_subhead {
	margin-top: 12px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
	font-style: italic;
}

div.profile_section {
	margin: 0px;
	padding: 0px;
}

div.profile_section p {
	margin: 0px;
	padding: 0px;
}

/* A div for small text - used on profile pages, reflections, etc. */
div.smalltext {
	font-size: 10pt;
	font-style: normal;
}

/* A div in which to put painting selection links */
div.painting_nav {
	position: relative;
	float: left;
	width: 76px;
	height: 76px;
	padding: 0px;
	margin-bottom: 13px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 14px;
	text-align: center;
}

/* Various styles for the painting navigator. Does very little in IE6 and earlier; no hover. */
div.painting_nav img {
	width: 70px;
	height: 70px;
	border-style: solid;
	border-width: 3px;
	border-color: #fff;
}

div.painting_nav img:hover {
	border-style: solid;
	border-width: 3px;
	border-color: #fd8;
}

div.painting_nav img.selected {
	border-color: #F60;
}

/* Various ways of ensuring 25% opacity, across many browsers. */
.faded {
	filter:alpha(opacity=25);
	-moz-opacity:0.25;
	-khtml-opacity: 0.25;
	opacity: 0.25;	
}

/* The progress box (for sending an email) */
#progress {
	position: absolute;
	left: 412px;
	width: 400px;
	top: 200px;
	padding: 10px;
	font-size: 16pt;
	font-style: italic;
	background-color: #fff;
	border-color: #F60;
	border-style: solid;
	border-width: 3px;
	display: none;
}

#progress p {
	margin-bottom: 0px;
	margin-top: 0px;
}