body {
   background-image: url("//toomuchrock.com/images/wallsconce.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top left;
	background-color: black;
} 

p { 
	margin: 0px 0px 0px 0px;
   padding: 8px 8px 8px 8px;
}

#accountContainer p.note {
   font-size: smaller;
   font-style: italic;
}

a:link {
	color: white;
	text-decoration: none;
}

a:visited {
	color: white;
	text-decoration: none;
}

a:hover {
	color: darkorange;
   text-decoration: underline;
}

div#livePhotos img {
	width: 180px;
	margin: 0px 0px 2px 0px;
	border: 0px;
	clear: right;
}

#accountContainer p:first-letter {
	color: darkorange;
	font-size: 200%;
}

#accountContainer p.note::first-letter, 
#accountContainer p.plain::first-letter {
   color: inherit;
   font-size: inherit;
}

img.logo {
   opacity: .75;
   width: 400px;
   height: 82px;
}

div#header img {
	border: 0px;
}

#header {
	width: 665px;
	text-align: center;
	position: relative;
	margin-bottom: 20px;
}

#accountHeader {
	width: 665px;
	background-color: black;
	padding: 5px;

	text-align: center;
	color: white;
	font-family: verdana, Geneva, Arial;
	font-size: 14px;
}

#social {
	width: 665px;
	padding: 5px; 
	margin: 0px; 

	background-color: black;

	border-width: 1px;
	border-style: dashed none dashed none;
	border-color: orange;

	text-align: right;
}

#usable {
	width: 800px;
}

#rightcol {
	width: 184px; /* to hold 180px with 2px borders */
	float: right;

	margin: 0px 0px 0px 8px;
}

div.rightcol {
	color: black;
	font-family: verdana;
	font-size: 10px;

	text-align: center;
}

#livePhotos {
	width: 180px;
	padding: 0px; 
	margin: 10px 0px 0px 0px;
	float: right;

	background-color: gray;
	border: 2px dotted white;

	/* These next 3 are duplicates from div.rightcol above
		to be able to bring over the folks from livestyle.css. 
		We can't move them as share is also class rightcol. */
	color: black;
	font-family: verdana;
	font-size: 10px;

	text-align: center;
}

#keywords {
	color: lightgrey;
	font-style: italic;
	font-size: x-small;
}

/* We want links inside of the keywords span to be different */

#keywords a:link {
	color: lightgrey;
	text-decoration: none;
}

#keywords a:visited {
	color: lightgrey;
	text-decoration: none;
}

#keywords a:hover {
	color: darkorange;
}

#accountContainer {
	width: 675px;
	margin: 0px; 

	display: block;
}

div.pageBlurb {
	background-color: black;
	color: white;
	font-family: verdana, Geneva, Arial;
	font-size: 12px;
	line-height: 140%;
}

p.correction {
	margin: 0px 0px 0px 0px;
   padding: 8px 8px 8px 8px;
	font-size: 9px;
	font-style: italic;
}

#accountFooter {
	/* IE on Mac is adding a 10px top margin to this
	   for some reason */
	margin: 0px; 
	width: 665px;
	padding: 10px 5px 0px 5px;
	border-top: 1px dashed darkorange;

	color: darkorange;
	background-color: black;

	text-align: center;
	font-family: impact, fantasy, arial;
	font-size: 16px;
	line-height: 120%;
}

/* Added Jan 2025 to use new Lightbox.  Until pages
	were migrated the old lightbox.css overwrote (maybe?)
	#lightbox and #lightbox img */
.lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.lightbox img {
	max-width: 90%;
	max-height: 90%;
	border: 10px solid #fff;
}

.lightbox .controls {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.lightbox .prev, .lightbox .next {
	font-size: 2rem;
	color: white;
	cursor: pointer;
	user-select: none;
}

.lightbox .close {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 2rem;
	color: white;
	cursor: pointer;
	user-select: none;
}

#lightbox-title {
	font-family: verdana, Geneva, Arial;
	color: white;
	text-align: center;
	font-size: 1.2rem;
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.8);
	width: 100%;
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	left: 0;
}