/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* ================================================================ 
This modified version, besides being pushed in the direction of my
personal preferences, has dynamic gallery width, the ability to
intersperse text with the images and allows mixing landscape and
portrait images. (c) 2007 Robert Heinig.
=================================================================== */

/* common styling */
* {
	margin:0;
	padding:0;
	border:0;
}

body {
	background:#FFF8E0;
	font:66.67% Verdana, sans-serif;
	color:#000;
	padding:20px;
}

p {
	margin:0 0 12px 0;
}

/* IE7 botches relative font sizes unless explicitly stated - these are chosen such that they have no effect on FF */
small {
	font-size:80%;
}
h1 {
	margin:0 0 10px 0;
	text-align:center;
	font-size:200%;
}
h2 {
	margin:0 0 2px 0;
	font-size:150%;
}
h3 {
	margin:0 0 2px 0;
	font-size:120%;
}
h4 {
	margin:0 0 1px 0;
	font-size:100%;
}

hr {
	border:1px solid;
	color:#CCC;
}
.lastchange {
	font-size:xx-small;
	color:#C42;
	text-align:center;
}

/* set up the overall width of the menu div and the margins with a relative position*/
.galrow {
	font-family:verdana, arial, sans-serif; 
	font-size:1.2em;
	margin:0 auto; 
	position:relative;
}

/* remove the bullets and set the margin and padding to zero for the unordered list */
.galrow ul {
	padding:0; 
	margin:0;
	list-style-type:none;
	border:0;
}

/* float the list so that the items are in a line */
.galrow ul li {
	float:left;
	z-index:1;
}

/* style the links to be 192px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.galrow ul li a, .galrow ul li a:visited {
	display:block;
	float:left;
	text-align:center;
	text-decoration:none;
	width:146px; /* barely allow 6 in a row in a firefox maximized to 1024x768 */
	height:30px;
	color:#000;
	border:1px solid #FFF;
	border-width:1px 1px 0 0;
	padding:0 6px;
	background:#CA4;
	line-height:30px;
	font-size:11px;
	overflow:hidden;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.galrow ul li:hover a{
	color:#FFF;
	background:#A55;
}

/* make the dropdown ul invisible and position it beneath the first list item */
.galrow ul li ul {
	z-index:80;
	display:none;
	text-align:left;
	position:absolute;
	top:31px;
	width:90%;
	left:5%;
	padding:8px 5px 15px 5px;
	border:12px solid #A44;
	background:#eee; 
	color:#000;
}

/* make the sub menu ul visible */
.galrow ul li:hover ul {
	display:block;
}

/* float Gallery items */
.galrow ul li ul li,
.galrow ul li:hover ul li {
	z-index:80;
	display:inline;
	float:none;
}

/* style the size, background color, border and margin of the submenu links */
.galrow ul li ul li a,
.galrow ul li:hover ul li a {
	float:left;
	width:124px;
	height:124px;
	background:#FFD;
	border:1px solid #888;
	padding:0px;
	margin:6px 13px;
	overflow:visible;
}
.galrow ul li:hover ul li.video a {
	border:1px solid #FA0;
}

/* style position of the links on hover */
.galrow ul li ul li a:hover,
.galrow ul li:hover ul li a:hover {
	position:relative;
}

/* style the initial image size 120px x 90px no border and 2pixel padding */
.galrow ul li ul li a img,
.galrow ul li:hover ul li a img {
	width:120px;
	border:0;
	padding:0px;
	margin:17px 2px;
}

/* override portrait */
.galrow ul li ul li.portrait a img,
.galrow ul li:hover ul li.portrait a img {
	width:auto;
	height:120px;
	margin:2px 17px;
}

/* style the 3x size image on hover with an absolute position to place it centrally over the original image */
.galrow ul li ul li a:hover img,
.galrow ul li:hover ul li a:hover img {
	width:320px;
	position:absolute;
	left:-100px;
	top:-70px;
	border:0;
	border:2px solid #888;
	padding:2px;
	background:#ccc;
}
.galrow ul li:hover ul li.video a:hover img {
	border:2px solid #FA0;
}

/* override portrait */
.galrow ul li ul li.portrait a:hover img,
.galrow ul li:hover ul li.portrait a:hover img {
	width:auto;
	height:320px;
	left:-70px;
	top:-100px;
}

/* change geometry a little for other aspect ratios */
.galrow ul li:hover .gal3x2 li a img {
	margin:22px 2px;
}
.galrow ul li:hover .gal3x2 li.portrait a img {
	margin:2px 22px;
}
.galrow ul li:hover .gal3x2 li a:hover img {
	top:-48px;
	margin:0;
}
.galrow ul li:hover .gal3x2 li.portrait a:hover img {
	left:-48px;
	margin:0;
}
.galrow ul li:hover .gal16x9 li a img {
	margin:28px 2px;
}
.galrow ul li:hover .gal16x9 li.portrait a img {
	margin:2px 28px;
}
.galrow ul li:hover .gal16x9 li a:hover img {
	top:-32px;
	margin:0;
}
.galrow ul li:hover .gal16x9 li.portrait a:hover img {
	left:-32px;
	margin:0;
}

/* embedded comments */
.galrow ul li ul li p {
	display:block;
	clear:both;
	padding:5px 10px 0 10px;
	color:#000;
}

.galclear {
	clear:both;
}

/* empty room after main gallery to facilitate scrolling */
.galspace {
	height:80px;
}


/* Copy for clicked-out single galleries - needed because the selectors have one less level */
.galstub { /* force hover images to fit */
	padding:10px 70px 10px 70px;
}
.galstub ul li {
	display:inline;
	float:none;
}
.galstub ul li a {
	float:left;
	width:124px;
	height:124px;
	background:#FFD;
	border:1px solid #888;
	padding:0px;
	margin:6px 13px;
}
.galstub ul li.video a {
	border:1px solid #FA0;
}
.galstub ul li a:hover {
	position:relative;
}
.galstub ul li a img {
	width:120px;
	border:0;
	padding:0px;
	margin:17px 2px;
}
.galstub ul li.portrait a img {
	width:auto;
	height:120px;
	margin:2px 17px;
}
.galstub ul li a:hover img {
	width:320px;
	position:absolute;
	left:-102px;
	top:-62px;
	border:2px solid #888;
	padding:2px;
	background:#ccc;
	margin:0;
}
.galstub ul li.video a:hover img {
	border:2px solid #FA0;
}
.galstub ul li.portrait a:hover img {
	width:auto;
	height:320px;
	left:-62px;
	top:-102px;
}
.galstub ul li p {
	display:block;
	clear:both;
	padding:0 10px 5px;
	margin:0 0 6px;
	font-size:1.2em;
	color:#000;
}

.galstub .gal3x2 li a img {
	margin:22px 2px;
}
.galstub .gal3x2 li.portrait a img {
	margin:2px 22px;
}
.galstub .gal3x2 li a:hover img {
	top:-48px;
	margin:0;
}
.galstub .gal3x2 li.portrait a:hover img {
	left:-48px;
	margin:0;
}
.galstub .gal16x9 li a img {
	margin:28px 2px;
}
.galstub .gal16x9 li.portrait a img {
	margin:2px 28px;
}
.galstub .gal16x9 li a:hover img {
	top:-32px;
	margin:0;
}
.galstub .gal16x9 li.portrait a:hover img {
	left:-32px;
	margin:0;
}