CSS for Monthly Gallery pages

html { 
	min-width: 958px;	
}

html>body #wrapper {
}

	/* base rules */

p.access	{
	display: none;
}

	/* Primary layout divisions */

/* Site title section */

#logo {
margin:15px 0 0 15px;
}

#logo h1 a {
	color:#000099;
	border:none;
}

#logo h1 a:hover {
	color:#FF0000;
	text-decoration:none;
	border:none;
}


body	{
	text-align: center;
	margin: 0;
	padding: 0;
	border: 0;	
	background: #ffffff;  	/* 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;
}

/* leader */

#leader	{
	width: 904px;
	height: 40px;
	padding:2px;	
	border: 4px double #553377;
	back-ground:#FFFFFF;
	margin-right: 6px;
	margin-bottom: 15px;
	margin-left: 0;	
}

#leader h2  {
	margin:0 0 10px 0;
	font-size:1.6em;
	font-weight:normal;
	line-height:120%;
	color:#FFFFFF;
	background:#553377;
}

#leader p {
	margin:0 0 10px 10px;
	font:120% tahoma, verdana, sans-serif;
	line-height: 1.5em;
	text-align: left;
}

#leader a {
	color:#ffffff;
	text-decoration:none;
	border-color:#ffffff;
}


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;
}

/* Footer */ 

div#footer	{				/*still need to calculate "fudge" for IEWin box hack ?*/
	position: relative;
	clear: both;
	border: 0;
	border-bottom: 2px solid #d8d8d8;
	background: #FAFAFA;
	width: 916px;
	padding: 5px 0;
	margin: 10px 0 0 12px;
	left: -12px;
}

#footer a {
color:#808080;
}

#footer a:hover {
color:#303030;
}

#footer p {
	color:#808080;
	font-size:.8em;
	line-height:1.2em;
	margin:0;
	padding:0;
	text-align:center;
}

/* 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 {
margin:0 0 20px 0;
font-size:3.0em;
font-weight:normal;
text-decoration:none; !important;
}
	
	/* Default links 	*/

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: 10px;
}

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: 20px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: 38px;
}
#gallery   {
	height:540px;
	border-right:1px solid #d8d8d8;
	border-bottom:1px solid #d8d8d8;
}
#galleries {	margin:0 auto 20px auto; }
#galleries label { padding-bottom: 2px; }

div#info {
	position:absolute;
	left:0px;
	top:508px;
	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('../../../Celebration/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('../../../Celebration/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('../../../Celebration/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 {
	position:relative;
	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: 10px;
	margin-left: 0;
}

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

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

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

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