CSS for Gallery pages

html { 
	min-width: 958px;	
}

html>body #wrapper {
}

	/* base rules */

p.access	{
	display: none;
}

	/* Primary layout divisions */

div#globalnav	{
	height: 50px;
	width: 916px;
	margin: 0 0 0 12px;
	padding: 0;
	border: 0;
	background: #ffddbb;
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff;
	line-height: normal;
	}

body	{
	text-align: center;
	margin: 0;
	padding: 0;
	border: 0;	
	background: #ffddbb;  	/* Colour of background */
	font: 75%/1.5em Verdana, Helvetica, sans-serif !important;
}

div#wrapper	{
	color: #600040;		/* Controls colour of maincontent text */
	background: transparent;
	width: 958px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	voice-family: "\"}\"";
	voice-family: inherit;
	
}

div#maincontent 	{
	position: relative;
	width: 916px;
	padding: 0;
	border: 0;
	margin: 0;
	/* False margin value for all versions of IE Win, including 6.0 */	
	margin-left: 6px;
	left: 0px;
}

html>body div#maincontent {
	/* Correct value for browsers that don't suffer from IE Win's bugs */
	margin-left: 12px;
	min-height: 630px;
	}

* html #maincontent {
    min-height: 630px;
}

/* Internet Explorer *\*/	
* html #maincontent {
    height: 630px;
}

div#footer	{				/*still need to calculate "fudge" for IEWin box hack ?*/
	clear: both;
	border: 0;
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff;
	background: #FFDDBB;
	color: #663;
	width: 916px;
	padding: 5px 0;
	margin: 10px 0 0 12px;
	position: absolute;
	top: 592px;
	z-index: 4;
	left: -12px;
}

div#footer p	{			/*still need to calculate "fudge" for IEWin box hack ?*/
	font-size: 1.4em;
	line-height: 2.0em;
	margin: 0;
	padding: 0 0 0 50px;
}

/* h1 is used for accessibility for folks/devices that don't use browsers (blind people with screen readers (who probably are not quilters) and quilters with palm pilots, blackberries and i-phones, etc. */

h1	{
	text-indent: -9999px;	
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
}
	
h1 a:link, h1 a:visited	{
	display: block;	
	width: 700px;
	height: 50px;
	background: #cc9;
	margin: 0 0 0 12px;
	padding: 0;
	border: 0;
}
	
h1 a:hover	{
	background: #cca;
	}
		
	/* YHQG Home nav (below) */

	/*  Java-free logo banner with rollover */  

#bannerlogoban {
	visibility: visible;
	margin: 0;
	padding: 0;
	border: 0;
	width: 916px;
	height: 50px;
	background: url(../images/nuban1x916.png);
}

#logoban {
	display: block;
	visibility: visible;
	padding: 0;
	border: 0;
	margin: 0;
	background: url(../images/nuban1x916.png);
	width: 916px;
	height: 50px;
}

a#logoban:hover {
	background: url(../images/nuban2x916.png);
}
	
	/* Default links 	*/

a:link, a:visited {		/* Don't like the colour of hyperlinks on main content? This is where u change 'em. */
	font-weight : bold;
	text-decoration : none;
	color: #506060;
	background: transparent;
}

a:hover {
	font-weight : bold;
	text-decoration : none;
	color: #ab8;
	background: transparent;
	background: #FDB;
}

a:active {
	font-weight : bold;
	text-decoration: none;
	color: #70CCCC;
	background: transparent;
	border-color: #ECE9D8;
}

div#maincontent p a:link, div#maincontent p a:visited, 
div#maincontent dd a:link, div#maincontent dd a:visited,
div#maincontent li a:link, div#maincontent li a:visited {
	text-decoration: none;
} 

div#maincontent p a:hover,
div#maincontent dd a:hover,
div#maincontent li a:hover {
	text-decoration: none;
} 

	/* Typography 	*/
	
h2, h3, h4	{
	font-weight: bold;
	line-height: 2.0em;
	margin: 15px 0 7px 0;
}

		
div#maincontent h2	{
	font-size: 1.8em;
}

body#home div#maincontent h2	{
	margin-top: 25px;
}

div#maincontent h3	{
	font-size: 1.4em;
	margin-bottom: 0px;
	font-weight: bold;
}

div#maincontent h4	{
	font-size: 1.2em;
	margin-bottom: 0px;
}

p	{
	font-size: 1.4em;
	margin: 0 0 1em 0;
	line-height: 150%;
}


/* Gallery and Playback Controls
----------------------------------------------- */
#gallerySelect { width: 140px; }
#controls {
	clear: left;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: 38px;
}
#galleries {	margin:0 auto 20px auto; }
#galleries label { padding-bottom: 2px; }

div#info {
	position:absolute;
	left:0px;
	top:449px;
	width:362px;
}

#galleryLinks a {
	color: white;
	text-decoration: none;
}

#transport {
	margin: 0;
	padding: 0;
	list-style: none;
}

#transport li {
	float: left;
	margin: 0;
	padding: 0;
	text-align: center;
}

#transport a {
	text-decoration: none;
	text-transform: uppercase;
	font-size: 85%;
	font-weight: bold;
	letter-spacing: 0.1em;
	margin: 0 1px 0 0;
	padding: 4px 8px;
	width: 64px;
	float: left;
	display: block;
	-moz-user-select: none;
	-khtml-user-select: none;
}

#transport a:link {
	background: #666 url('../../images/bg_grad_gray1.gif') repeat-x;
	color: #fff;
	border-top: solid 1px #999;
	border-right: solid 1px #404040;
	border-bottom: solid 1px #3a3a3a;
	border-left: solid 1px #404040;
}

#transport a:visited {
	background: #666 url('../../images/bg_grad_gray1.gif') repeat-x;
	color: #fff;
	border-top: solid 1px #999;
	border-right: solid 1px #404040;
	border-bottom: solid 1px #3a3a3a;
	border-left: solid 1px #404040;
}

#transport a:hover {
	background: #666 url('../../images/bg_grad_gray2.gif') repeat-x;
	color: #000;
	border-top: solid 1px #999;
	border-right: solid 1px #404040;
	border-bottom: solid 1px #3a3a3a;
	border-left: solid 1px #404040;
}

#transport a:focus {
	-moz-user-select: none;
	-khtml-user-select: none;
}

#transport .playBtn .pauseLabel, #transport .pauseBtn .playLabel {
	display: none;
}

#previews {
	border-top: solid 1px #404040;
	border-right: solid 1px #404040;
	border-bottom: solid 1px #3a3a3a;
	border-left: solid 1px #404040;
	margin-bottom: 5px;
	width: 340px;
	float: left;
	margin-right: 10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
}

#thumbnails {
	clear: both;
	margin: 15px auto;
}
#thumbnails div {
	position: relative;
	width: 24px;
	height: 24px;
	float: left;
	margin: 8px;
	padding: 0;
	float: left;
	display:inline;
}

#thumbnails img {
	width: 24px;
	height: 24px;
	position: absolute;
	border-top: solid 1px #999;
	border-right: solid 1px #404040;
	border-bottom: solid 1px #333;
	border-left: solid 1px #404040;
}

#mainImageOutline {	

	/* Do not increase margin-left, because (if left margin is larger) MS Explorer Version 6 browsers (and probably Version 7) set to screen resolution of 1152x864 do not display images 500 pixels wide correctly. Instead, they "push" #mainImage down and to the left side, as if instructed to "clear left." Messed up. Explorer 6 and 7 read box-models size differently from Firefox. So, if you want to increase size (ask yourself why?) make sure you test in Explorer screen size 1152x864. This is an uncommon setting. It is used by the Toronto Public Library system and at present only about 2% of visitors use this setting. However ... */

	padding: 0;
	background-color: #eee;
	border-top: solid 1px #999;
	border-right: solid 1px #404040;
	border-bottom: solid 1px #333;
	border-left: solid 1px #404040;
	padding: 1em;
	overflow: hidden;
	width: 0px;
	height: 0px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 10px;
}

#mainImage {
	width: 100%;
	height: 100%;
}

#picture img {	border: 1px solid #999; }

.selectedThumbnail {  border: solid 3px #70CCCC !important; }

.inFocus {  border: solid 3px #70CCCC !important; }