/* Place the thing relatively */
	#gallery {position: relative; height: 570px;}
	/* Image at the top (trick for 100% height MINUS the margins) */
		#focus {position: absolute; bottom: 0; top: 0; left: 0; right: 0; height:100%;}
		/* Most of this will be overridden with javascript... */
			#focus_inner {position: absolute; top: 50%; left: 50%; width:5px; height:5px;margin:0; background: #f5f5f5; overflow: hidden; }
			/* the 95% height below is needed to fix image issue, wasn't displaying bottom 20px or so at 100% or 'auto'  */
			#image        {padding: 21px 0 0 0; height: 95%; width: 100%; display: block; }
			#image img    {display: block; width: 100%; height: 100%; margin:0; }

			/*toolbar - now has a ul with bg image rollovers on a tags via id's*/
			#toolbar               {height: 20px;  float:right; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }
			#toolbar ul            {list-style-type: none;}
			#toolbar ul li         {float:right; margin:0; padding:0; }
			#add                   {background:url(/image/add.gif)  no-repeat; width:81px;}
			#lbox                  {background:url(/image/lbox.gif) no-repeat; width:90px }
			#toolbar ul li a       {line-height:20px; text-decoration:none; display:block; overflow:hidden; text-indent: -10000px; white-space: pre;}
			#toolbar ul li a:hover {background-position: 0 -20px}
			
			/*result - feedback from toolbar */
			#result {display:none; padding:3px;width:200px;line-height:13px; border: 1px solid #999999; position:absolute; background:#FFFFFF; z-index:1000; top:50%; left:50%; margin:-50px 0 0 -100px; color:#000000; text-align:center; font-size:13px;}
	/*playpause - feedback from toolbar
			#playpause {display:none; padding:3px;width:90px;height:50px; border: 1px solid #999999; position:relative; background:#FFFFFF; z-index:1000;  color:#000000; text-align:center; font-size:13px;} 
			#playpause a {color:#FFFFFF; display:block; text-decoration:none; overflow: hidden; text-indent: -10000px; white-space: pre;}
			*/
			#playpause {float:left;  margin: 72px 0 0 -233px; height:21px; line-height:21px; background:url(/image/pause.gif) no-repeat;padding:0 0 0 25px; font-size:12px; }
			
			#playpause:hover { cursor:pointer}
	/* Thumbs at the bottom */
		#thumbs   {position: absolute; width: 630px; top: 580px; height: 68px; line-height: 60px; background:#FFFFFF; margin:0 0 0 -34px}
		#prev,
		#next     {float: left; width: 40px; height: 60px; margin: 4px 0; text-align: center; color: #FFFFFF; font-weight: bold; font-size: 24px;  filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5;}
		/* now with graphic arrows on next prev */
		#prev			{margin-right: 5px; margin-left:-10px; background: url(/image/prev.gif); }
		#next     {margin-left:  5px; background: url(/image/next.gif);}
		#images   {float: left; width: 550px; height: 100%; overflow: hidden;}
		/* The strip */
			#imagestrip img       {float: left; margin: 4px 2px; cursor: pointer;}
			#imagestrip img:hover,
			#imagestrip img.hover {margin: 0 2px; padding: 2px 0; border-top: 2px solid #999999;}